Rails 3、ブートストラップモーダルリモート呼び出しの複数のレイヤー

Question

私はこれに対して2日間、頭を上げています。私は大いに欲求不満で、検索でこれに関する情報を見つけることができないようです。

問題です。私は別のコントローラからいくつかのHTMLをロードするために：remote => trueリンクを使用しています。

$('.managed_locations').bind('ajax:complete', function(evt, xhr, status){ 
    $('#locations_modal').modal('show') 
    $('#locations_modal').html(xhr.responseText); 
}); 

これで、htmlが取得され、ブートストラップモーダルにダンプされ、モーダルが表示されます。これはうまくいきます。

しかし、モーダルの内部には、remote => trueも使用する形式があります。今、人生をもっと難しくするために、ボタンを押すとフォームをクローンして表示します。したがって、ユーザーは多くのフォームを持つことができます。

今問題です。フォームが送信されるたびに、通常のページのように読み込まれます。これは：remote => trueが無視されているかのようです。しかし、これはモーダルでしかありません。モーダルコントローラーを単独でロードするだけでうまくいきます。また、別のjqueryライトボックスを使用する前にこれを開発していましたが、正常に動作していました。私はちょうど一貫性のためにブートストラップを切り替えています。

私の最初の考えは、jquery_ujs.jsが新しいフォームを見つけられないということです。そこで、フォーム要素を出力するコードをいくつか追加しました。

コンソールに出力

$("#log_events").click(function() { 
$(document).find(".new_stored_physical_location").each(function() { 
    console.log($(this).data()); 
    console.log($(this).data('events')); 
}); 
return false; 
}); 

：

Object { type="html", remote=true} 
Object { ajax:complete=[1]} 

だから私はイベントはjQueryのに設定されていることがわかります。これらのフォームのそれぞれは：remote => trueであり、要求が完了したときのajaxイベントを持ちます。しかし、それはちょうど私が提出するヒット時には、アヤックスのリクエストをしていない。

ajaxリクエストがフォームから起こることを確認するために必要なものがありますか？ data（）はうまく見え、データ（ 'events'）はうまく見えます。しかし、私が見る必要がある他のイベント/バインディングがありますか？

今モーダルからロードされているhtmlがレイアウトをロードしています。しかし、私はそれをレイアウトなしで、レイアウトなしでやってきました。それは私のナッツを運転しています。助けてくれてありがとう。

編集：いくつか余分な奇妙さ。モーダルは、いくつかの追加のリモートリンクもロードします。これらのリンクはすべて正しく動作しています。動作していないようなフォームリンクのみです。

Answer 1

私は解決策を得ました。

$(document).delegate(rails.formSubmitSelector, 'submit.rails', function(e) { 

FYI、rails.formSubmitSelector = '形'：大きな問題はjquery_ujs.js内、特にこのラインでした。このコードでは、ドキュメントのすべてのフォームが見つかり、この関数を使用してサブミットを上書きしました。しかし問題は、いったんあなたがいくつかのajaxをロードし、それにajaxが含まれていれば、この素晴らしいイベントを追加しないということでした。あなたはそれを再追加する必要があります。

これは私がやったことです。

jquery_ujsの内部には、$ .railsを使用して外部からアクセスできる一連の関数があります。つまり、$ .rails.enableElement、$ .rails.nonBlankInputsのようなものです。そして、提出イベントのコードは、すべてのワイリー・ニルの周りに座っていました。ページが読み込まれると一度だけ実行されます。だから私はそれを関数addSubmitEvent（）に入れます：

// Add the form submit event 
addSubmitEvent: function(element) { 

    //$(element) was before $(document) but I changed it 
    $(element).delegate(rails.formSubmitSelector, 'submit.rails', function(e) { 


    var form = $(this), 
     remote = form.data('remote') !== undefined, 
     blankRequiredInputs = rails.blankInputs(form, rails.requiredInputSelector), 
     nonBlankFileInputs = rails.nonBlankInputs(form, rails.fileInputSelector); 

    if (!rails.allowAction(form)) return rails.stopEverything(e); 

    // skip other logic when required values are missing or file upload is present 
    if (blankRequiredInputs && form.attr("novalidate") == undefined && rails.fire(form, 'ajax:aborted:required', [blankRequiredInputs])) { 
     return rails.stopEverything(e); 
    } 

    if (remote) { 
     if (nonBlankFileInputs) { 
     return rails.fire(form, 'ajax:aborted:file', [nonBlankFileInputs]); 
     } 

     // If browser does not support submit bubbling, then this live-binding will be called before direct 
     // bindings. Therefore, we should directly call any direct bindings before remotely submitting form. 
     if (!$.support.submitBubbles && $().jquery < '1.7' && rails.callFormSubmitBindings(form, e) === false) return rails.stopEverything(e); 

     rails.handleRemote(form); 
     return false; 

    } else { 
     // slight timeout so that the submit button gets properly serialized 
     setTimeout(function(){ rails.disableFormElements(form); }, 13); 
    } 
    }); 

} 

これは基本的にまったく同じコードです。しかし今は$（文書）ではなく$（要素）です。これは、モーダルがhtmlに読み込まれたときに盗聴できるようになったために変更されました。それでは、私は電話することができます：

私はモーダルを複数回開いたり開いたりしてから何度もイベントを追加していました。だから私は単なるtrue/falseをそれの周りに置くだけでそれを一度呼び出すだけです。