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

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


wordpress jquery ajax contact-form-7
person PavKR    schedule 04.03.2015    source источник

Ответы (5)


arrow_upward
10
arrow_downward

Contact Form 7 вызывает функцию инициализации, которая выполняется при загрузке страницы. Если ваша форма загружается с использованием 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();
        });
}
person Anuj Kumar    schedule 10.06.2015
comment
Отличная работа. Для тех, кто заинтересован, это также решило мою проблему, вызвав функцию wpcf7InitForm() после моей загрузки ajax ($('div.wpcf7 > form').wpcf7InitForm();). - person kevin; 30.06.2015
comment
Потрясающе, как раз то, что я искал! - person J82; 30.08.2015
comment
Я пробовал это решение, и оно вроде работает. Я говорю вроде как, потому что вам нужно а) вызывать его каждый раз, когда вы закрываете, а затем открываете всплывающее окно и б) каждый вызов вставляет новый логотип загрузки - person Andrija; 16.09.2015
comment
@ Андрия, ты нашел решение, чтобы не клонировать загрузочные логотипы? - person rafaelmorais; 02.11.2015
comment
@rafaelmsantos К сожалению, нет умного решения - я в основном добавил проверку, которая удаляет ненужные элементы из DOM после того, как они были добавлены с библиотекой. - person Andrija; 02.11.2015
comment
@Андрия, понятно. Я тоже делал что-то подобное, спасибо за ваш комментарий. - person rafaelmorais; 02.11.2015
comment
#кевин я проверяю $('div.wpcf7 › form').wpcf7InitForm(); но не работает проверка формы - person Mukesh Panchal; 17.05.2016
comment
По какой-то причине он удаляет мой ajax-загрузчик, даже если это был один элемент для исправления, который я добавил условие: if ( jQuery('.ajax-loader').length › 1 ) { jQuery( 'form.wpcf7-form' ) . каждый (функция () { jQuery (это). найти ('.ajax-загрузчик'). последний (). удалить (); }); } - person Usman Arshad; 15.06.2017

arrow_upward
9
arrow_downward

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

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

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

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

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

person honk31    schedule 14.12.2017
comment
Спасибо, это ответ для последних версий WPCF7. - person user1049961; 29.12.2017

arrow_upward
4
arrow_downward

Используйте следующий код для версии 5.4 или выше:

document.querySelectorAll(".wpcf7 > form").forEach((
                function(e){
                    return wpcf7.init(e)
                }
            )
        );

Поместите это в свой ответ ajax. Это приведет к повторной инициализации всех форм

person Joseph Ledesma Gabito    schedule 27.02.2021

arrow_upward
2
arrow_downward

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

В моем случае я пытался встроить форму 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.

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

person YiZhAi    schedule 07.04.2015

arrow_upward
0
arrow_downward

Не удалось отправить форму через ajax с приведенными выше комментариями. Мне пришлось использовать метод wpcf7.submit против wpcf7.init

Пример использования:

wpcf7.submit(document.querySelector('.wpcf7-form'));
person David    schedule 19.10.2020