目标
我有一个页面,其中包含来自Rails后端的项目列表。我想使用Rails UJS通过Ajax调用编辑该列表中的一行。
方法
我在每一行的末尾添加了一个编辑按钮。编辑按钮是一个link_to ... :remote => true
。单击它会重新加载列表,但选定的行变为编辑模式。可编辑行嵌入在一个form ... :remote => true
中。该行中的保存按钮是submit
按钮。
index.html.haml
#editor
%table
- @items.each do |item|
%tr
= render :partial => 'row', :locals => { :item => item }
_row.html.haml
...
%td // a number of columns with attributes
...
%td
= link_to t("actions.edit"), edit_item_path(item), :remote => true
= link_to t("actions.delete"), item_path(item), :remote => true, :method => :delete, :data => { :confirm => "Are you sure?" }
edit.html.haml
#editor
%table
- @items.each do |item|
%tr
- if item == @item
= form_for @item, :url => item_path(@item), :remote => true, do |f|
= render :partial => "row_form", :locals => { :f => f }
- else
= render :partial => 'row', :locals => { :item => item }
_row_form.html.haml
...
%td // a number of columns with editable attributes
...
%td
%button{ :type => "submit" }=t("actions.save")
= link_to t("actions.cancel"), items_path, :remote => true
Ajax响应处理
$("#editor").on("ajax:success", function(event, data, status, xhr) {
$("#editor").html($(data).find("#editor").html());
});
问题
当我在编辑模式下加载列表页/items/12/edit
时,第12项的行可编辑。单击保存按钮可以通过Ajax正确提交表单并使用jQuery加载/items
索引部分,替换可编辑列表。再次单击编辑按钮会重新加载编辑页面(例如/items/12/edit
),嵌入表单。但是,这一次,当单击保存按钮时,表单不再被提交。似乎没有将提交事件处理程序附加到动态加载的远程表单。
问题
如何提交通过Ajax加载的远程表单,最好使用Rails UJS方法?
重复
我知道有这个问题的重复,但没有一个得到了答案。我希望有人最终能给出一个明确的答案。