Problem: Verwenden von jquery zum dynamischen Hinzufügen neuer Zeilen zur Tabelle. Beim Hinzufügen einer neuen Zeile wird das Attribut nicht erhöht.Rails - Hinzufügen von Zeilen zu verschachtelten Formulartabellen über jquery
Ich habe Schwierigkeiten, jquery mit Schienen zu arbeiten. Volle Offenlegung, ich war noch nie so gut mit Javascript/Jquery, aber ich versuche zu verstehen, wie es mit Schienen integriert. Ich benutze Ruby 2.3.1 und Rails 5.0.0.1.
Ich habe 2 Modelle (Form und Server), aber ich bin ihnen in einem Formular beitreten. Dies ist eher ein Test, da ich vorhabe, weitere Modelle hinzuzufügen und diese Formulare in das neue partielle Formular zu verschachteln. Daher verwende ich beim Erstellen des Formulars die Option acces_nested_attributes_for im Formular, damit ich bei der Übergabe in die verschiedenen Tabellen schreiben kann.
Im Folgenden sind meine 2 Modelle:
class Form < ApplicationRecord
has_many :servers
accepts_nested_attributes_for :servers, allow_destroy: true
end
und
class Server < ApplicationRecord
belongs_to :form, required: false
end
Unten ist mein _form.html.erb für die Form teilweise. Wie Sie sehen können, hat es auch neue Server verschachtelt. Ich habe die Datenbank überprüft und es funktioniert bei der Einreichung. Es erstellt ein neues Formularobjekt sowie das neue Serverobjekt.
<%= 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 %>
Wenn ich einreiche, merke ich, dass nur 2 Server jemals in der Datenbank gespeichert werden. Die erste und die letzte Zeile in der Tabelle. Wenn ich die Seite inspiziere, merke ich auch, dass die erste Reihe Attribute für die erste (0) Reihe und die letzte (in diesem Fall) (1) Reihe hat. Egal, wie oft ich auf meine jquery-Schaltfläche klicke, das Attribut wird nur einmal erhöht, obwohl die Zeilen hinzugefügt wurden.
image Ich Inspektion der dritten Reihe auf meinem Tisch, die Namen haben sollte = "form [servers_attributes] [2] [cpucores]
Was bin ich falsch hier? Warum werden die Attribute nicht erhöht wird ? dementsprechend
Edit: ich habe auch bemerkt, dass alle meine <td> ‚s, nur die mit options_for_select bricht meine jquery, wenn ich es mit J im erb nicht entkommen Warum das ist, wenn diese <td> nicht existierte.? , die anderen würden immer noch arbeiten, ohne es mit J zu umgehen,
Wie sieht das JavaScript aus, wenn es zum Browser kommt? Ich nehme an, dass es nicht das ist, was du willst. – sammygadd