Question

需要一些帮助，我使用最新版本的插件和WP。

我甚至设置了一个空白测试主题，以确认我的实际主题不是问题。

基本上，我在一个页面上有一个联系表格7。如果直接在浏览器中加载此页面，则内容和表单将按原样显示。

如果我通过ajax加载此页面，内容将按原样显示，但表单不是。而是仅显示Contact Form 7插件的短代码。

以下是测试主题中的示例函数。

function th_test_ajax()
{
$page_id = $_POST['page_id'];

$args = array(
    'page_id' => $page_id,
    'post_status' => 'publish',
    'post_type' => array('page')
);

$wp_query = new WP_Query($args);

if ($wp_query->have_posts())
{
    while ($wp_query->have_posts())
    {
        $wp_query->the_post();

        the_content();
    }
}

die();
}
add_action('wp_ajax_load_content', 'th_test_ajax');
add_action('wp_ajax_nopriv_load_content', 'th_test_ajax');

这是jQuery部分。

jQuery(document).ready(function($) {
$('body').on('click', '#load_page', function(e){
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: th.ajax_url,
        data: { action: 'load_content', page_id: $(this).data('page-id') },
        cache: false,
        dataType: 'html'
    }).done(function(response) {
        $('#content').html(response);
    });
})
});

这是index.php，＆＃34; data-page-id =＆＃39; 29＆＃39;＆＃34;是短代码所在的页面。

<html>
<?php
wp_head();
?>
<body>
<div id="content">
<p>
<?php
if (have_posts()) 
{
    while (have_posts())
    {
        the_post();

        the_content();
    }
}
?>
</p>
<p id="content">first content!</p>
<a href="/kontakt" id="load_page" data-page-id="29">ajax</a>
</div>
</body>
<?php
wp_footer();
?>
</html>

我甚至尝试过其他具有短代码的插件，并将它们添加到同一页面，并且它们通过ajax工作。

由于某种原因，只有联系表格7不起作用。

有什么想法吗？

Answer 1

你需要这样称呼：

var ajaxContainer = $('#somediv_id'),
    newCF7 = $('.wpcf7 > form', ajaxContainer);
    newCF7.attr('action', "#" + newCF7.attr('id'));
    wpcf7.initForm( newCF7 );

WordPress，联系Form7未通过ajax加载

1 个答案: