rails中的遠程模態表單，不會觸發AJAX事件

我在Rails中創建了一個模式表單，它使用AJAX遠程提交值。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開發人員控制檯日誌中。如果我將表單代碼添加到索引視圖本身並從那裏提交，我可以看到422錯誤以及'foo.coffee'中分配的日誌消息。

任何人都可以找到我失蹤的東西嗎？

來源

2016-08-21 Herm

您是否試圖在'$（document）.on（'ready page：load）'中包裝咖啡代碼？ – AndreyS

我只是試圖做@AndreyS。沒有運氣 – Herm

@Herm你不需要提及'type：'script''，所以刪除它。但那不會解決你的問題，但不需要增加。 :) –

重新審視你的代碼後，我想到了實際問題。你的模式表單使用JS加載，這意味着當你的頁面加載到瀏覽器中時，它不存在。這就是爲什麼JS沒有/不能將回調代碼綁定到表單，因爲您想綁定/註冊它的源Dom不存在。爲了解決這個問題，你需要將回調註冊到頁面中存在的元素，當它加載第一次時，你的表單必須是它的一個子元素。這個概念被稱爲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'

來源

2016-08-21 19:02:11

+1刪除turbolinks指出事件代表團。我的回調不起作用，因爲我將它們綁定到一個動態加載的表單元素。 – MikeMarsian

rails中的遠程模態表單，不會觸發AJAX事件

回答

相關問題