web-dev-qa-db-ja.com

重力がモーダルにjQuery.loadを形成

私はページ上に存在する重力フォームの連絡フォームを持っていますが、私が欲しいのはその場でそのフォームを開き、モーダルでそれを表示するサイトワイドリンクです。

これを解決する1つの方法は、フォームをテンプレート側のマークアップに挿入することです。これにより、フォームは各ページにすでに存在します。しかし、それはマークアップとgfスクリプトがたくさんロードされていることを意味します。

そこで、ページからフォームのマークアップを取得してDOMに挿入し、スクリプトをロードしてから、結果をTwitterのブートストラップモーダルで表示するjsをまとめました。

物事の表現面は期待通りに動作します - しかし、条件付き論理などのjsのどれも適用されていません。 Imがconsole.logに各スクリプトのステータスを送り込むようにjsがロードされているのを私は知っています - そしてImは "200"とエラーなしを取得します。しかし、スクリプトのようにフォームを見ることができないか、正しくインスタンス化されていません。

Js endをテストするために、以下のようにして手動でリソースをヘッドにロードすることも試みました。

<?php gravity_form_enqueue_scripts(1, true); ?>

しかし、それもうまくいきません。

下記はjs Imが使用しているものですが、これをどのようにして生命を形にするかについてのアイデアはありますか？使用すべきコールバックはありますか？
事前に感謝します - ベン

jQuery(document).ready(function(){
// load contact form with ajax
jQuery(".contact_btn").click(function(){
    jQuery.ajaxSetup ({ cache:false });
    var ajax_load = "<img height='50px' width='50px' src='/assets/img/medloading.gif' class='tr_spinner' alt='loading...' style='align:center, top:50%' />";
    var loadUrl = "/contact-3/";
    // load the scripts dynamically
    jQuery.when(
        jQuery.getScript("/plugins/gravityforms/js/gravityforms.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}), // console logs to get confirmation that its loaded
        jQuery.getScript("/plugins/gravityforms/js/conditional_logic.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/datepicker.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/jquery.textareaCounter.plugin.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/jquery.maskedinput-1.3.min.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);})
    ).then(function(){
    // insert the content into the DOM
    jQuery("#contact-form .modal-body").html(ajax_load).load(loadUrl + " .entry-content");
    // load it in the modal
    jQuery("#contact-form").modal({ keyboard: false, show: true, backdrop: true });
    });
    // Hijack the <a> link
    return false;
});
});
jqueryajaxplugin-gravity-forms
1
orionrush

私は最終的に開発チームから、iframeが最善のアプローチであることを示唆する回答を受け取りました。

タイミングの問題のようです。ドキュメントが既にロードされた後にフォームがDOMにロードされているので、これは問題になります。正直に言うと、Gravity FormsのすべてのJSの複雑さによって、これを機能させることができるかどうかはわかりません。代わりにiframeを使用することを真剣に検討します。

この応答が返ってくるまでに、[.load()][1]を使用してインポートしていたdivに元のコンテンツのスクリプト要素がすべて欠落していることがわかりました。これは、 は明示的には文書化されていませんが、.load()はインラインスクリプトを削除するため、マークアップが存在している間は起動の利点はありません。

1つの解決策（これはうまくいきます）は、ページのソースを見てインラインスクリプトの内容をパッケージ化し、それを[jQuery.getScripts()][3]呼び出しでロードするjsファイルにパッケージ化することです。 <script></script>要素を削除することに加えて、移行の問題を緩和するには相対パスが大きすぎるため、パスを変更することもできます。

ここでの（大きな）欠点は、このスクリプトを自分自身でパッケージ化することで、バックエンドからパラメータを受け取ることがなくなり、フォームに変更が加えられたときに壊れる可能性があることです。それはまたブラウザ検出の少数の例で焼き付けました。

これらの制限のために、そしてこれらのスクリプトを動的に生成する方法がなければ、iframeは本当に進むべき道です。とは言っても、スクリプトを出力するカスタムクラスを作成することは間違いなく可能です - 必要とされるもののほとんどがプライベート関数の下に閉じ込められているのでform_display.phpの内容からリファクタリングする必要があるでしょう。私はこれまでにこれを試みるだれでもの私の捜索で少しの証拠も見つけませんでした。

1
orionrush