Jquery Rails：无法提交通过Ajax加载的远程表单 目标

我有一个页面，其中有一个来自Rails后端的项目列表。我希望能够通过Rails UJS使用Ajax调用编辑该列表中的一行

方法 我在每行的末尾添加了一个编辑按钮。“编辑”按钮是一个

链接到…：远程=>true

。再次单击它将加载列表，但选择 行处于编辑模式。可编辑行嵌入在

表单中…：远程=>true

。 该行中的保存按钮是一个

submit

按钮

index.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        = render :partial => 'row', :locals => { :item => item }

... 
%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?" }

#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 }

... 
%td // a number of columns with editable attributes
...
%td
  %button{ :type => "submit" }=t("actions.save")
  = link_to t("actions.cancel"), items_path, :remote => true

#editor
  = render :partial => "edit"

\u row.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        = render :partial => 'row', :locals => { :item => item }

... 
%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?" }

#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 }

... 
%td // a number of columns with editable attributes
...
%td
  %button{ :type => "submit" }=t("actions.save")
  = link_to t("actions.cancel"), items_path, :remote => true

#editor
  = render :partial => "edit"

edit.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        = render :partial => 'row', :locals => { :item => item }

... 
%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?" }

#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 }

... 
%td // a number of columns with editable attributes
...
%td
  %button{ :type => "submit" }=t("actions.save")
  = link_to t("actions.cancel"), items_path, :remote => true

#editor
  = render :partial => "edit"

\u row\u form.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        = render :partial => 'row', :locals => { :item => item }

... 
%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?" }

#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 }

... 
%td // a number of columns with editable attributes
...
%td
  %button{ :type => "submit" }=t("actions.save")
  = link_to t("actions.cancel"), items_path, :remote => true

#editor
  = render :partial => "edit"

Ajax响应处理

$("#editor").on("ajax:success", function(event, data, status, xhr) {
  $("#editor").html($(data).find("#editor").html());
});

%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 }

问题 在编辑模式下加载列表页时，项目12的行为 可编辑。单击save按钮通过Ajax提交表单并正确加载

/items

索引部分，将可编辑列表替换为jQuery。点击 再次按下编辑按钮，再次加载编辑页面（例如，

/items/12/edit

） 嵌入的形式。只是这一次，当 单击保存按钮。提交事件处理程序似乎未附加到 动态加载的远程表单

问题: 如何提交通过Ajax加载的远程表单，最好使用Rails UJS方法

复制品 我知道这个问题有重复的地方，但没有一个得到回答。我希望最终有人能给出一个明确的答案

---

我实现这一点的方法是使用内置的Rails功能：

在控制器的编辑操作中，添加到

respond\u to

阻止行

format.js

。这允许您创建一个edit.js.erb文件，用于将编辑表单加载到DOM中

然后，在同一控制器的更新操作中，再次将

format.js

添加到

respond\u to

块，并拥有一个update.js.erb文件，该文件通过jQuery执行必要的DOM操作

---

我确信这在在线教程中有进一步的解释，但我最终理解了它是如何工作的，而不必调用jQueryAjax方法

问题在于DOM是由javascript修改的，回调（在您的示例中，在ajax成功时）仅在DOM init上初始化。因此，当DOM发生变化时（在#editor的一部分），回调就不起作用了

因此，您应该在任何时候使用javascript更改DOM时重新初始化此回调

$("#editor").on("ajax:success", function(event, data, status, xhr) {
  $("#editor").html($(data).find("#editor").html());
});

不久前jQuery有一个名为“live”的函数。它像“开”一样工作，但跟踪DOM的变化。但在当前版本的jQuery中，此函数因速度较慢而被弃用

---

希望你能理解我糟糕的英语=）

我发现了问题！多亏了杰克·史密斯和巴拉德机器人回答中的提示。这是我在两个步骤中发现的

结果1 虽然启动

ajax:success

似乎不是问题，但仅仅在

$（“#编辑器”）

选择器上，表单处理似乎没有100%正常工作。至少需要是

$（“#编辑器表单”）

，但是如果我们从索引页开始，这可能不起作用，因为索引页还没有包含表单。因此，杰克·史密斯提出的方法似乎是最有效的方法。这导致：

edit.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        = render :partial => 'row', :locals => { :item => item }

... 
%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?" }

#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 }

... 
%td // a number of columns with editable attributes
...
%td
  %button{ :type => "submit" }=t("actions.save")
  = link_to t("actions.cancel"), items_path, :remote => true

#editor
  = render :partial => "edit"

edit.js.erb

$('#editor').html('<%= escape_javascript render("edit") %>');

但这仍然没有导致一个工作提交按钮。直到我发现哪里出了问题

结果2 上面的解决方案确实给出了提交按钮的普通旧的

POST

行为，这是服务器不喜欢的，因为它期望

PUT

到达

更新

操作。Rails通过生成一个隐藏的

\u方法

字段，该字段的值为

PUT

。我发现rails在

\u edit.html.haml

部分和

表单

标记的顶部生成了这个字段（以及一些其他重要的隐藏字段）！所以我把表格移到了部分的顶部，它成功了

\u edit.html.haml（工作！）

---

谁会想到

我遇到了一个与此类似的问题，即通过ajax加载的表单没有提交，这是由于TurboLink，我发现解决方案是将我的事件绑定到主体而不是元素，相关答案可在此线程中找到：

---

如何使用$（document）.on（“click..on我也遇到了同样的问题，最终理解了原因。 您的html源必须由以下内容组成

<tr>
  <form>
    <td><input type="text"></td>
    <td><input type="submit"></td>
  </form>
</tr>

一些浏览器，包括Chrome和Firefox，似乎无法正确处理这种嵌套标记

---

在用ul/li等其他标签替换table/tr/td标签后，我可以成功提交重新提交的表单。

您的开发工具窗口中有错误吗？如果有，是什么错误？如果您还没有，如果您使用的是Chrome，我会下载。它为您提出的rails请求提供了一些非常好的反馈。查看您的在题为“Ajax响应处理”的部分中，我认为您可能希望尝试使用事件委派，就像下面的示例一样。当然，这意味着您需要使用class属性而不是id属性来标识您的编辑表单，我相信。您到底遇到了什么错误？您知道这种方法走了多远吗t直到它停止工作？所以继续链接到codeschool根域，因为这是完全有用的…呃，不。可能不适合你。但目的是让链接为他们提供注册的起点，并找到他们想要学习的课程。如果我链接到某个特定课程，他们无论如何都必须注册。但是谢谢你的评论。没问题，随时。：）注意