Rails ajax表单不从另一个提交

Question

我有一个 Rails 3.2 ajax 表单，可以为酒店创建一个新房间。新的 Room ajax 表单在 Room 索引页面上可以正常工作，但是一旦我将新的 Room ajax 表单嵌入到酒店编辑页面上，该表单会在不使用 Ajax 的情况下正常提交。

要创建新的 Room 表单，我使用 Hotel edit.html.erb 页面上的以下链接：

<%#= link_to 'Add a Room', new_room_path(:hotel_id => @hotel.id), :remote => true, :class => 'new_room' %>

这会将以下表单部分加载到同一页面上：

<%= form_for @room, :remote => true, :html => { :class => "remote-form" } do |f| %>
 <%= f.text_field :number %>
 <%= f.text_field :size %>

  <% if(params.has_key?(:'hotel_id')) %>
    <% @hotel_id = params[:hotel_id] %>
    <%= f.hidden_field :hotel_id, :value => @hotel_id %>                    
  <% else %>
    <%= f.collection_select(:hotel_id, Hotel.all, :id, :name) %>
  <% end %>

 <%= f.submit "Add this room", :class => 'room_create' %>
 <%= link_to 'Cancel', '#', :class => "room_cancel" %>
<% end %>

最后，我的 create.js.erb 中有以下内容（在房间文件夹内）：

alert('Test creating a room');
var content = $('<%= escape_javascript(render(@room)) %>');
$("#room_list tbody").append(content);

create.js.erb 没有被执行，并且表单被定期提交（非 ajax），我终于到达了房间 show.html.erb 页面。

为什么表单在 Units 索引页面上正常工作，但在关联的酒店编辑页面上却没有？

Answer 1

即使你设置了:remote => true，Rails 也会生成一个form 标签。 浏览器不支持嵌套表单标签，会导致不可预知的行为。

您应该重新考虑这里的视图架构。可能您可以在酒店的表单之外拥有房间的表单，或者您可以使用fields_for 和accepts_nested_attributes_for 来编辑子对象。

这是一个关于如何使用嵌套属性的完整示例：Nested Attributes Examples。

Answer 2

您不能将表单嵌套在 HTML 中的表单中。当您单击表单上的任何提交按钮时，即使它在另一个表单内，也只会正确提交最外面的表单。

您可以使用nested attributes 将房间的属性直接添加到表单中，以便在提交整个表单时所有房间都...或者使用 div 和链接，而不是表单和一个提交按钮。