form_tag不会将动态生成的fields_for用作输入

Posted 2023-01-13

我正在尝试以一种形式创建多个对象。不是亲子关系的东西，对象都是一样的。

当代码如下所示时，就可以正常工作。

<%= form_tag create_object_path, id: "create-object-form" do %>
  <%= render "admins/object_fields" %>
  <!-- repeat render any number of times -->
<% end %>

# where the render looks like this:
<%= fields_for "objects[]" do |f| %>
  <tr class="new-object">
    <td><%= f.text_field :name %></td>
  </tr>
<% end %>

一种测试方法是，在控制台中，$("#create-object-form").serializeArray()根据已渲染的object_fields正确返回输入字段的数量。

但是，当动态调用渲染时，在提交中没有动态添加的fields_for。调用$("#create-object-form").serializeArray()仅返回2个字段，即utf8和authenticity_token，它们由form_tag自动生成。不起作用的代码

<%= form_tag create_object_path, id: "create-object-form" do %>
  <!-- render called by JS -->
<% end %>

<button id="add-object">Add</button>

$("#add-object").click(function() 
  $.ajax()...
  // correctly fetches and renders the partial on the page in the correct spot.
)

# where the render STILL looks like this, no change:
<%= fields_for "objects[]" do |f| %>
  <tr class="new-object">
    <td><%= f.text_field :name %></td>
  </tr>
<% end %>

答案

答案很有趣。我不明白为什么，也没有做大量的尝试，欢迎任何人进一步添加。

问题缺少上下文。输入在表的行中，因此代码实际上看起来像这样：

<table>
  <thead>...content...</thead>
  <%= form_tag form_path, id: "form" do %>
    <tbody>
      <!-- either pre-rendered or dynamically generated trs with input fields -->
    </tbody>
    <tbody>
      <tr>
        <td colspan="3">
          <button id="submit">Submit</button>
        </td>
      </tr>
    </tbody>
  <% end %>
</table>

form_tag包裹在tbody周围，其中包含trs和input字段。在该版本的代码中，正如提到的问题，在提交时或.serializeArray()中仅选择了预渲染的输入。

但是，如果我将form_tag移到table标记之外，则它可以工作；也就是说，动态提交的trs和input字段可以在提交时或通过.serializeArray()成功获取。

同样，我不知道为什么，找不到任何表明这是预期行为的文档，请随时告诉我。谢谢！

工作代码：

<%= form_tag form_path, id: "form" do %>
  <table>
    <thead>...content...</thead>
    <tbody>
      <!-- either pre-rendered or dynamically generated trs with input fields -->
    </tbody>
    <tbody>
      <tr>
        <td colspan="3">
          <button id="submit">Submit</button>
        </td>
      </tr>
    </tbody>
  </table>
<% end %>