web-dev-qa-db-ja.com

AJAXロード後にContactForm7フォームでAJAXを有効にする

検索を試みましたが、これはAJAXページ/フォームをロードする方法の結果のみを返します。私が行っているのは、AJAX（連絡先フォーム7）と私はそのフォームでAJAX送信を再度有効にする方法を知りたいです。これはCF7で可能ですか？

jqueryajaxwordpresscontact-form-7
8
PavKR

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();
        });
}
8
Anuj Kumar

この動作は、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を削除しました

7
honk31

私は過去3時間かけてこれに対する解決策を探しましたが、答えのない質問しか見つかりませんでしたが、解決策を見つけたと思います。これがこの問題を抱えているあなたや他の人々に役立つことを願っています。

私の場合、PrettyPhotoを使用してCF7フォームをインラインライトボックスに埋め込もうとしていました（ただし、これはFancyboxのような他のフォームと同じだと思います）。私の問題は、これらのインラインライトボックスがAJAXを介してライトボックス内のコンテンツを生成するように機能し、CF7スクリプトがそのコンテンツの前にロードされたため、フォームのAJAX送信が機能しなかったことです。

私がしたことは、prettyphotoライトボックスが開かれたときにトリガーされるイベントで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送信が再度有効になります。

それが役に立てば幸い！

2
YiZhAi