Last active
June 7, 2019 08:00
-
-
Save seanlinsley/2038003 to your computer and use it in GitHub Desktop.
A better form to edit multiple child records. Created for https://github.com/gregbell/active_admin/issues/1097
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%= semantic_form_for @parent do |a| %> | |
<%= a.inputs "Family Details" do %> | |
<%= a.input :name %> | |
<%= a.input :user %> | |
<%= a.input :region %> | |
<% end %> | |
<%= a.inputs "Children" do %> | |
<table> | |
<tr> | |
<th>First Name</th> | |
<th>Last Name</th> | |
<th>Age</th> | |
<th>Gender</th> | |
</tr> | |
<%= a.semantic_fields_for :children do |b| %> | |
<tr> | |
<td><%= b.input :first_name, :label => false %></td> | |
<td><%= b.input :last_name, :label => false %></td> | |
<td><%= b.input :age, :label => false %></td> | |
<td><%= b.input :gender, :label => false %></td> | |
<td><%= link_to "Remove", "#", onclick: " | |
if (confirm('Are you sure you want to delete this?\ | |
\\nIt will be permanently deleted!')) { | |
$.ajax({url: '/children/#{b.object.id}', type: 'DELETE'}); | |
$(this).closest('tr').remove(); return false; | |
}", :class => "button" %></td> | |
</tr> | |
<% end %> | |
<% js = a.semantic_fields_for :children, Child.new do |c| %> | |
<tr> | |
<td><%= c.input :first_name, :label => false %></td> | |
<td><%= c.input :last_name, :label => false %></td> | |
<td><%= c.input :age, :label => false %></td> | |
<td><%= c.input :gender, :label => false %></td> | |
<td><%= link_to "Remove", "#", :onclick => "$(this).closest('tr').remove(); return false;", :class => "button" %></td> | |
</tr> | |
<% end %> | |
</table> | |
<span class="add-child"> | |
<% js = escape_javascript(js) %> | |
<%= link_to I18n.t('active_admin.has_many_new', | |
model: @child.to_s.singularize.titlecase), "#", | |
onclick: "$('table.children tr').last().after( | |
'#{js}'.replace(/[0-9]+(?=[\\\]_])/g, new Date().getTime()) | |
); return false;", | |
class: "button" %> | |
</span> | |
<% end %> | |
<%= a.actions do %> | |
<%= a.action :submit %> | |
<li class="cancel"><%= link_to "Cancel", parent %></li> | |
<% end %> | |
<% end %> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks for this, it's a lot nicer. I found another thing for me to make it working.
It didn't do anything when clicking on "add a new child". just add a class to the table:
so that it get found when calling in javascipt here: