AJAXイベントをトリガーしないレールのリモートモーダルフォーム

Question

RailsでAJAXを使用してリモートから値を送信するモーダルフォームを作成しました。

モーダルフォーム自体の提出は何らかの理由で、AJAXイベントをトリガーしません。ページにまったく同じフォームコード（つまりモーダルではない）を追加すると、送信時にAJAXイベントがトリガーされます。

はここに私のコードです：

//index.haml 
= link_to 'New', new_foo_path, data: { remote: true, type: 'script'} 

//_form.haml 
= bootstrap_form_for @foo, remote: true do |f| 
    = f.text_field :bar 
    = f.button "Save" 


//foos_controller.rb 
def create 
    respond_to do |format| 
    if @foo.save 
     format.json { render json: @foo, status: :ok } 
    else 
     format.json { render json: @foo.errors, status: :unprocessable_entity } 
    end 
    end 
end 

//foo.coffee 
$('#new_foo').on('ajax:success', (e, data, status, xhr) -> 
    console.log 'Great success' 
).on 'ajax:error', (e, data, status, xhr) -> 
    console.log 'Great failure' 

上記のコードを使用して、検証に合格しない値でフォームを送信するとき、私は422エラーを見ることができます。この現象は予期されています。ただし、これは上記のメッセージをChrome Dev Consoleログに出力しません。フォームビューにフォームコードを追加してそこから送信すると、422エラーと 'foo.coffee'に割り当てられたログメッセージが表示されます。

誰かが見つけられないものを見つけることができますか？

Answer 1

コードを見直した後、私は実際の問題が何であるかを確かめます。モーダルフォームはJSを使用してロードされます。つまり、ページがブラウザに読み込まれたときにはそれは存在しません。そのため、あなたが持っていたJSは、コールバックのコードをフォームにバインドできませんでした。なぜなら、バインド/登録したいソースのDomが存在しないからです。この問題を解決するには、最初の時間が読み込まれ、フォームが子の1つでなければならないときに、ページに存在する要素にコールバックを登録する必要があります。このコンセプトはEvent Delegationと呼ばれます。したがって、以下のコードは動作します：

$('body') 
.on 'ajax:success', '#new_foo', (e, data, status, xhr) -> 
    console.log 'Great success' 
.on 'ajax:error', '#new_foo', (e, data, status, xhr) -> 
    console.log 'Great failure'