AJAX 加载后在 Contact Form 7 上启用 AJAX

Question

我试过搜索，但关于如何AJAX 加载 page/form 只有 returns 个结果。我正在做的是通过 AJAX（联系表格 7）加载表格，我想知道如何在该表格上重新启用 AJAX 提交。 CF7 有这种可能性吗？

Answer 1

过去三个小时我一直在寻找这个问题的解决方案，但我只找到了没有答案的问题，但我想我找到了解决方案，希望这能帮助你和其他解决这个问题的人。

在我的例子中，我试图将 CF7 表单嵌入到带有 PrettyPhoto 的内联灯箱中（但我认为这与 Fancybox 等其他灯箱相同）。我的问题是这些内联灯箱可以通过 AJAX 在灯箱内生成内容，而 CF7 脚本是在该内容之前加载的，因此 AJAX 提交表单无效。

我所做的是通过 jQuery.get 在打开 prettyphoto 灯箱时触发的事件中获取 CF7 脚本。在您的情况下，我认为您应该在通过 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 提交。

希望对您有所帮助！

Answer 2

Contact Form 7 调用一个初始化函数，该函数在页面加载时执行。如果您的表单使用 AJAX 加载，您应确保在加载表单后调用该函数。

调查：

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

对于函数的定义wpcf7InitForm.

编辑： 每次调用此函数都会插入一个新的加载徽标。不幸的是，我找不到比使用 jQuery:

从 DOM 中删除重复加载程序更好的解决方案

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

Answer 3

wpcf7 的 4.8 版改变了这种行为。从那以后电话会是

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

Answer 4

无法通过 ajax 发送带有上述评论的表格。我不得不使用 wpcf7.submit 方法与 wpcf7.init

用法示例：

wpcf7.submit(document.querySelector('.wpcf7-form'));

Answer 5

5.4以上版本使用以下代码：

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

将此放入您的 ajax 回复中。这将重新初始化所有表单

AJAX 加载后在 Contact Form 7 上启用 AJAX

Enabling AJAX on Contact Form 7 Form after AJAX Load

ajax

wordpress

jquery

contact-form-7