Rails -通过jquery向嵌套表单表格添加行

Question

问题:使用jquery向表中动态添加新行。添加新行时，属性不会递增。

我在让jquery使用rails时遇到了一些困难。坦率地说，我对javascript / jquery从来都不是很在行，但是我正在尝试理解它是如何与rails集成的。我使用的是ruby 2.3.1和Rails 5.0.0.1。

我有两个模型(表单和服务器)，但是，我将它们连接到一个表单中。这更像是一个测试，因为我计划添加更多的模型并将这些表单嵌套在新的部分表单中。因此，在创建表单时，我在表单上使用了accepts_nested_attributes_for选项，以便在提交时可以写入不同的表。

下面是我的两个模型：

class Form < ApplicationRecord
  has_many :servers
  accepts_nested_attributes_for :servers, allow_destroy: true
end

和

class Server < ApplicationRecord
  belongs_to :form, required: false
end

下面是我的表单_form.html.erb partial。正如您所看到的，它还嵌套了服务器新表单。我检查了数据库，它在提交时就能正常工作。它创建一个新的表单对象以及新的服务器对象。

<%= form_for(form) do |f| %>
  <% if form.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(form.errors.count, "error") %> prohibited this form from being saved:</h2>

      <ul>
      <% form.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :environment %>
    <%= f.text_field :environment %>
  </div>

  <div class="field">
    <%= f.label :location %>
    <%= f.text_field :location %>
  </div>

  <div class="field">
    <%= f.label :purpose %>
    <%= f.text_field :purpose %>
  </div>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :accessibility %>
    <%= f.text_field :accessibility %>
  </div>

  <div class="field">
    <%= f.label :description %>
    <%= f.text_area :description %>
  </div>

  <!-- section for servers -->
  <table id="server-table" class="table table-bordered">
    <tr>
      <th class="row-description">Host Name</th>
      <th class="row-description">IP Address</th>
      <th class="row-description">Operating System</th>
      <th class="row-description">CPU Cores</th>
      <th class="row-description">Memory(GB)</th>
      <th class="row-description">Disk Space(GB)</th>
    </tr>

  <div id="server-row">
    <tr>
    <%= f.fields_for(:servers, Server.new) do |server| %>
      <td><%= server.text_field :hostname, class: "form-control" %></td>
      <td><%= server.text_field :ip, class: "form-control" %></td>
      <td><%= server.select :os, options_for_select(["Ubuntu", "CentOS"]) %></div>
      <td><%= server.number_field :cpucores, class: "form-control" %></td>
      <td><%= server.number_field :memory, class: "form-control" %></td>
      <td><%= server.number_field :disk, class: "form-control" %></td>
    <% end %>
    </tr>
  </div>
  </table>
  <td><button type="button" id="add-server" class="pull-right">Add Another Server!</button></td>

  <div class="actions">
    <%= f.submit %>
  </div>

<script>
  $(document).ready(function(){
      $("#add-server").click(function(){
          $("#server-table").append('\
          <tr> \
            <%= f.fields_for(:servers, Server.new) do |server| %> \
              <td><%= j server.text_field :hostname, class: "form-control" %></td> \
              <td><%= j server.text_field :ip, class: "form-control" %></td> \
              <td><%= j server.select :os, options_for_select(['Ubuntu', 'CentOS']) %></div> \
              <td><%= j server.number_field :cpucores, class: "form-control" %></td> \
              <td><%= j server.number_field :memory, class: "form-control" %></td> \
              <td><%= j server.number_field :disk, class: "form-control" %></td> \
            <% end %> \
          </tr > \
          ');
      });
  });
</script>
<% end %>

当我提交时，我注意到只有2台服务器保存在数据库中。表中的第一行和最后一行。当我检查页面时，我还注意到第一行具有第一(0)行和最后(在本例中) (1)行的属性。无论我在jquery按钮上单击多少次，即使添加了行，该属性也只增加一次。

image我正在检查我的表上的第三行，它应该有name="formservers_attributescpucores“

我在这里做错了什么？为什么属性没有相应地递增？

编辑:我还注意到，在我所有的<td>中，只有一个带有options_for_select的jquery会破坏我的jquery，如果我没有在erb中用J转义它的话。为什么?如果这个<td>不存在，其他的<td>仍然可以工作，而不会用J转义它。

Answer 1

所以我最终选择了这条路线。我没有使用ruby代码，而是将行添加为HTML，并通过将其添加为计数器来逐行递增(参见下面的javascript )。这绝对不是"Rails的方式“，所以如果任何人有任何建议，请加入。

<%= form_for(form) do |f| %>
  <% if form.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(form.errors.count, "error") %> prohibited this form from being saved:</h2>

      <ul>
      <% form.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :environment %>
    <%= f.text_field :environment %>
  </div>

  <div class="field">
    <%= f.label :location %>
    <%= f.text_field :location %>
  </div>

  <div class="field">
    <%= f.label :purpose %>
    <%= f.text_field :purpose %>
  </div>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :accessibility %>
    <%= f.text_field :accessibility %>
  </div>

  <div class="field">
    <%= f.label :description %>
    <%= f.text_area :description %>
  </div>

  <!-- section for servers -->
  <table id="server-table" class="table table-bordered">
    <tr>
      <th class="row-description">Host Name</th>
      <th class="row-description">IP Address</th>
      <th class="row-description">Operating System</th>
      <th class="row-description">CPU Cores</th>
      <th class="row-description">Memory(GB)</th>
      <th class="row-description">Disk Space(GB)</th>
    </tr>

  <div id="server-row">
    <tr>
    <%= f.fields_for(:servers, Server.new, remote: true) do |server| %>
      <td><%= server.text_field :hostname, class: "form-control" %></td>
      <td><%= server.text_field :ip, class: "form-control" %></td>
      <td><%= server.select :os, options_for_select(["Ubuntu", "CentOS"]) %></div>
      <td><%= server.number_field :cpucores, class: "form-control" %></td>
      <td><%= server.number_field :memory, class: "form-control" %></td>
      <td><%= server.number_field :disk, class: "form-control" %></td>
    <% end %>
    </tr>
  </div>
  </table>
  <td><button type="button" id="add-server" class="pull-right">Add Another Server!</button></td>

  <div class="actions">
    <%= f.submit %>
  </div>

  <script>
    $(document).ready(function(){
        var count = 1;
        $("#add-server").click(function(){
          $("#server-table").append('\
            <tr> \
              <td><input class="form-control" type="text" name="form[servers_attributes][' + count + '][hostname]" id="form_servers_attributes_' + count + '_hostname"></td> \
              <td><input class="form-control" type="text" name="form[servers_attributes][' + count + '][ip]" id="form_servers_attributes_' + count + '_ip"></td> \
              <td><select name="form[servers_attributes][' + count + '][os]" id="form_servers_attributes_' + count + '_os"><option value="Ubuntu">Ubuntu</option><option value="CentOS">CentOS</option></select></td> \
              <td><input class="form-control" type="number" name="form[servers_attributes][' + count + '][cpucores]" id="form_servers_attributes_' + count + '_cpucores"></td> \
              <td><input class="form-control" type="number" name="form[servers_attributes][' + count + '][memory]" id="form_servers_attributes_' + count + '_memory"></td> \
              <td><input class="form-control" type="number" name="form[servers_attributes][' + count + '][disk]" id="form_servers_attributes_' + count + '_disk"></td> \
            </tr > \
          ');
          count++;
        });
    });
  </script>

<% end %>