Ajaxed загруженный контент не ведет себя должным образом

Question

Существует шаблон страницы с именем post-plain-body, который печатает заголовок и текст пройденного сообщения. Страница с именем AjaxLoader использует этот шаблон. Если, например, я позвоню /ajaxloader с id в качестве значения $_POST['id'], будет отображено содержимое этого сообщения.

Это вызывается через jQuery на главной странице. Он фактически загружает содержимое поста / страницы в определенный контекст.

Одна из загружаемых мной страниц содержит форму Contact Form 7. Форма отображается, но когда я отправляю ее, она переходит к /ajaxloader/#wpcf7-f2-p34-o1 вместо использования Ajax для проверки формы.

Это шаблон страницы.

<?php
/*
Template Name: Ajax Loader
*/

// Load contact form 7 scripts
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    wpcf7_enqueue_scripts();
    wpcf7_enqueue_styles();
}

// Gets the content only from a post. Used in ajax loading
if(isset($_POST['id'])):
    $post = get_post($_POST['id']);
    if ($post) : setup_postdata($post); 
        ?>
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div><?php
    endif;
else:?>
    <h2>Page not found</h2><?php
endif;
?>

И jQuery, который загружает контент, выглядит следующим образом

function load_page(pid) {
    $("#page_preview").load("ajaxloader/", {id:pid},function(){
        $('#page_preview').fadeIn(300);
        $('#page_loading').hide();
    });
}

EDIT

<form> не присоединен к сценариям Контактной формы 7, как следует. Я нашел это с помощью отладки JavaScript в Firebug. Как правило, к событиям click и submit должны быть подключены два обработчика. Любые предложения, почему это не прилагается?

Answer 1

Я нашел решение. Может показаться кому-то тривиальным, но в любом случае я подумал, что должен поделиться.

На шаблонах страниц, которые вы используете для загрузки только содержимого (без заголовков, боковых панелей и т. Д.) С помощью Ajax, выполните следующие действия:

1. добавить wp_head();
2. добавить шаблон страницы (как в вопросе выше)
3. добавить wp_footer(); к низу

Если у кого-то есть дополнительная информация о процедуре, пожалуйста, сообщите:)

Answer 2

Позвоните на AjaxComplete:

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

Answer 3

Похоже, contact-form-7 вызывает функцию load_page() при отправке.Возможно, вы захотите проверить, как вы определили обработчик событий, который вызывает load_page().

Также может быть, что contact form 7 использует функцию с тем же именем load_page() и вызывает некоторые конфликты.

Вы должны предоставить нам уменьшенную версию jsfiddle.