AJAX 加载后在联系表单 7 表单上启用 AJAX

Posted 2023-05-08

【中文标题】AJAX 加载后在联系表单 7 表单上启用 AJAX

【英文标题】：Enabling AJAX on Contact Form 7 Form after AJAX Load

【发布时间】：2015-05-06 03:09:43

【问题描述】：

我尝试过搜索，但这只会返回有关如何 AJAX 加载页面/表单的结果。 我正在做的是通过 AJAX（联系表 7）加载表单，我想知道如何在该表单上重新启用 AJAX 提交。 CF7有这种可能性吗？

【参考方案1】：

Contact Form 7 调用一个 init 函数，该函数在页面加载时执行。如果您的表单使用 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();
        );

【讨论】：

干得好。对于那些感兴趣的人，这也解决了我的问题，方法是在我的 ajax 加载 ($('div.wpcf7 > form').wpcf7InitForm();) 之后调用 wpcf7InitForm() 函数。

太棒了，正是我想要的！

我已经尝试过这个解决方案，它有点工作。我说的有点是因为你需要 a) 每次关闭时调用它然后打开弹出窗口 b) 每次调用都会插入一个新的加载徽标

@Andrija，您找到不克隆加载徽标的解决方案了吗？

@rafaelmsantos 不幸的是，没有聪明的解决方案 - 我基本上添加了一个检查，在将它们添加到库后从 DOM 中删除不必要的元素

【参考方案2】：

这种行为随着 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

【讨论】：

谢谢，这是最新版本 WPCF7 的答案

【参考方案3】：

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

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

把它放在你的 ajax 响应中。这将重新初始化所有表单

【参考方案4】：

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

在我的情况下，我试图将 CF7 表单嵌入到带有 PrettyPhoto 的内联灯箱中（但我认为这与 Fancybox 等其他人一样）。我的问题是这些内联灯箱通过 AJAX 生成灯箱内的内容，并且在该内容之前加载了 CF7 脚本，因此表单的 AJAX 提交不起作用。

我所做的是通过 jQuery.get 在打开漂亮照片灯箱时触发的事件上获取 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 提交。

希望对你有帮助！

【参考方案5】：

无法使用上述 cmets 通过 ajax 发送表单。我不得不使用wpcf7.submit 方法与wpcf7.init

示例用法：

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