問題: jquery を使用して新しい行をテーブルに動的に追加します。新しい行を追加するとき、属性は増加しません。
jqueryをレールで動作させるのに苦労しています。完全な開示、私はjavascript / jqueryにあまり慣れていませんが、それがレールとどのように統合されるかを理解しようとしています. Ruby 2.3.1 と Rails 5.0.0.1 を使用しています。
2 つのモデル (フォームとサーバー) がありますが、それらを 1 つのフォームに結合しています。モデルをさらに追加し、それらのフォームを新しい Form パーシャル内にネストすることを計画しているため、これはテストのようなものです。したがって、フォームを作成するときは、フォームでaccepts_nested_attributes_forオプションを使用しているため、送信時にさまざまなテーブルに書き込むことができます。
以下は私の2つのモデルです：
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 パーシャルです。ご覧のとおり、サーバーの新しいフォームがネストされています。データベースを確認したところ、送信時に機能します。新しいフォーム オブジェクトと新しいサーバー オブジェクトを作成します。
<%= 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ボタンを何回クリックしても、行が追加されても属性は1回しか増加しません。
name="form[ servers_attributes ][2][cpucores] を持つ必要があるテーブルの 3 行目を調べています。
ここで何が間違っていますか？属性がそれに応じて増加しないのはなぜですか?
編集：すべての私のもののうち、erbでエスケープしないとjquery<td>を壊すものだけがあることに気付きました。何故ですか？これが存在しない場合、他のものは でエスケープせずに動作します。options_for_selectJ<td>J