Включение AJAX в контактной форме 7 Форма после загрузки AJAX

Question

Я пробовал поиск, но это возвращает результаты только того, как AJAX загружает страницу/форму. Что я делаю, это загрузка формы через AJAX (контактный формуляр 7), и я хотел бы знать, как повторно включить отправку AJAX в эту форму. Возможно ли это с CF7?

Answer 1

Форма контакта 7 вызывает функцию init, выполняемую при загрузке страницы. Если ваша форма загружается с использованием AJAX, вы должны убедиться, что функция вызывается после загрузки вашей формы.

Посмотрите на:

plugins/contact-form-7/includes/js/scripts.js

для определения функции wpcf7InitForm.

Редактировать: Вызов этой функции каждый раз вводит новый логотип загрузки. К сожалению, я не мог найти лучшее решение, чем удаление дубликатов загрузчика из DOM с помощью JQuery:

function initContactForm() { 
    jQuery('div.wpcf7 > form').wpcf7InitForm(); 
    jQuery('form.wpcf7-form') 
     .each(function() { 
      $j(this).find('img.ajax-loader').last().remove(); 
     }); 
} 

Answer 2

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

В моем случае я пытался внедрить форму CF7 в встроенный лайтбокс с PrettyPhoto (но я думаю, что это то же самое с другими, как Fancybox). Моя проблема заключалась в том, что эти встроенные лайтбоксы работают, создавая контент внутри лайтбокса через AJAX, а сценарии CF7 загружаются до этого содержимого, поэтому отправка формы AJAX не работает.

Что я делал, так это получение сценариев CF7 через jQuery.get в событии, инициированном при открытии лайтбокса prettyphoto. В вашем случае, я думаю, что вы должны сделать это только после генерации контента через AJAX, что-то вроде:

jQuery.get("/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20"); 
jQuery.get("/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.1"); 

Убедитесь, что ваши пути и версии совпадают, в противном случае их изменения.

Это обновит форму и снова включит AJAX submit.

Надеюсь, это поможет!

Answer 3

это поведение изменилось с версии 4.8 wpcf7. С тех пор вызов будет

wpcf7.initForm(jQuery('.wpcf7-form')); 

пока она больше не требует JQuery, вы можете также передать узел .. somehting как это (способный многообразных форм ..)

var wpcf7_form = document.getElementsByClassName('wpcf7-form'); 
[].forEach.call(wpcf7_form, function(form) { 
    wpcf7.initForm(form); 
}); 

это все еще написанный в jQuery, но он не должен быть активным (т.е. jQuery.ready()) в вашей функции для работы. плюс он избавился от jQuery.form