Question

我的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>

Answer 1

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

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

这将为函数get_contact_form

注册ajax挂钩

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
}

现在，当您使用action: get_contact_form发出ajax请求时，它将尝试运行上述功能。由于我们没有将参数传递给函数，我们将检查是否设置了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的引用，例如 - ＆gt;

data-form="11"

第二个关键部分是success:function(data){，当ajax请求成功时，它将获取返回的数据并使其成为formContainer的HTML。在我们的例子中，它将是表格。

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

class="ajax-form-button"

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

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

Wordpress使用php do_shortcode交换div内容

1 个答案: