2

我的 wordpress 标题中有一个脚本。我想通过单击按钮将表单动态加载到容器中。总共有两种表格，当然每个表格有一个按钮。

当我将 do_shortcode 函数存储到 php 变量中时，将 php 变量存储到 jquery 变量中，短代码就会执行。当我使用与 php do_shortcode 变量相呼应的变量更改容器的 html 值时，它不会呈现表单，而只会呈现短代码值。我究竟做错了什么？

<?php $cf7Shortcode = do_shortcode( "[contact-form-7 id='11' title='form']" ); ?>

<script type="text/javascript">
$(document).ready(function() {

    var form1 = <?php echo $cf7Shortcode ?>,
        form2 ='test',

        button1 = $('#btn1'),   
        button2 = $('#btn2')

        formContainer = $('#form-container');


    button1.on("click", function(){
        formContainer.html(form1);
    });

    button2.on("click", function(){
        formContainer.html(form2);
    });

});


</script>
4

1 回答 1

2

在您主题的functions.php 文件中，我们要声明我们希望运行的ajax 函数。

add_action('wp_ajax_get_contact_form', 'get_contact_form');
add_action('wp_admin_ajax_get_contact_form', 'get_contact_form');

这将为函数注册您的 ajax 钩子get_contact_form

function get_contact_form(){
    if(isset($_GET['form_id'])):
        echo do_shortcode( "[contact-form-7 id='$_GET['form_id']' title='form']" );
    endif;
    exit(); //need this, or you'll have issues with getting '1' back as a value
}

现在，当您使用 发出 ajax 请求时action: get_contact_form，它将尝试运行上述函数。由于我们没有将参数传递给函数，因此我们将检查是否form_id已设置，如果已设置，我们将返回短代码。无论如何，我们都必须退出。

让我们设置我们的 ajax 调用。

buttons.click(function(){
    $.ajax({
        url: ajaxurl, //global variable provided by WP
        type: 'GET',
        data: {
            'action' : 'get_contact_form',
            'form_id' : $(this).data('form')
        },
        success: function(data){
            formContainer.html(data);
        }
    });
});

上面的关键部分是$(this).data('form')，这是一个data attribute。看起来您可以控制标记，因此添加对要获取 HTML 的表单 ID 的引用，如下所示 ->

data-form="11"

第二个关键是success:function(data){，当ajax请求成功时，会取返回的数据，做成.html文件的HTML formContainer。在我们的例子中，它将是表单。

最后，不要使用 ，而是id's使用 aclass作为按钮。

class="ajax-form-button"

然后代替var button1 = / button 2 =，只是做buttons = $('.ajax-form-button')。然后我们不必制作一堆 click/ajax 函数，因为我们允许由data-form属性处理逻辑。这将保持代码最小化和可重用。

我不认为我在这里忘记了什么。

于 2013-06-15T22:35:36.090 回答