Rails nested_form adding items to table rows - ruby-on-rails-3

Question

My goal is to use the nested_form gem: https://github.com/ryanb/nested_form
but instead of creating just a new set of labels and fields every time you add an object, I wanted to insert a row into an existing table.
= nested_form_for #transaction do |f|
%h3 Line Items
%table
%tr
%th Branch
%th Department
%th Invoice #
%th Amount
%th Transaction Type
%th Deposit (y/n)
%th
= f.fields_for :line_items do |line_item|
%tr
%td
= line_item.text_field :location_id
%td
= line_item.text_field :department_id
%td
= line_item.text_field :invoice_num
%td
= line_item.text_field :amount
%td
= line_item.text_field :transaction_type
%td
= line_item.text_field :deposit
%td= line_item.link_to_remove "Remove"
%p= f.link_to_add "Add", :line_items
The .link_to_add button just creates a bunch of fields in the first row, first td.
<h3>Line Items</h3>
<table>
<tr>
<th>Branch</th>
<th>Department</th>
<th>Invoice #</th>
<th>Amount</th>
<th>Transaction Type</th>
<th>Deposit (y/n)</th>
<th></th>
</tr>
<div class="fields"><tr>
<td>
<input id="transaction_line_items_attributes_0_location_id" name="transaction[line_items_attributes][0][location_id]" size="30" type="text" />
</td>
<td>
<input id="transaction_line_items_attributes_0_department_id" name="transaction[line_items_attributes][0][department_id]" size="30" type="text" />
</td>
<td>
<input id="transaction_line_items_attributes_0_invoice_num" name="transaction[line_items_attributes][0][invoice_num]" size="30" type="text" />
</td>
<td>
<input id="transaction_line_items_attributes_0_amount" name="transaction[line_items_attributes][0][amount]" size="30" type="text" />
</td>
<td>
<input id="transaction_line_items_attributes_0_transaction_type" name="transaction[line_items_attributes][0][transaction_type]" size="30" type="text" />
</td>
<td>
<input id="transaction_line_items_attributes_0_deposit" name="transaction[line_items_attributes][0][deposit]" size="30" type="text" />
</td>
<td><input id="transaction_line_items_attributes_0__destroy" name="transaction[line_items_attributes][0][_destroy]" type="hidden" value="false" />Remove</td>
</tr>
<td>Add</td>
</div>
</table>
I've tried placing the .link_to_add in a few places, but it doesn't put them in their own row.
Is there an easy way to go about adding a row of input boxes each time?

Answer 1

This helped me a lot: https://github.com/ryanb/nested_form/wiki/How-To:-Render-nested-fields-inside-a-table
By default fields_for inside nested_form_for adds <div class="fields"> wrapper around every nested object. But when you need to render nested fields inside a table you can disable default wrapper using :wrapper => false option and use the custom one:
<table>
<%= f.fields_for :tasks, :wrapper => false do |task_form| %>
<tr class="fields">
<td>
<%= task_form.hidden_field :id %>
<%= task_form.text_field :name %>
</td>
<td><%= task_form.link_to_remove 'Remove' %></td>
</tr>
<% end %>
<tr>
<td><%= f.link_to_add 'Add', :tasks %></td>
</tr>
</table>
Note: You need to specify id field. Otherwise fields_for will insert it after </tr>.
Also you need to override default behavior of inserting new subforms into your form using javascript:
window.NestedFormEvents.prototype.insertFields = function(content, assoc, link) {
var $tr = $(link).closest('tr');
return $(content).insertBefore($tr);
}
A similar technique can be used for lists, for compatibility with a jQuery UI sortable list.
If you are using simple_form then add the :wrapper => false option to the surrounding simple_nested_form_for call, otherwise it gets overwritten by the :wrapper => nil default.

Answer 2

I ended up putting my link_to_add as the last line of the table, added this to my application.js (mostly from the example on the wiki)
jQuery(function ($) {
window.NestedFormEvents.prototype.insertFields = function(content, assoc, link) {
if($(link).hasClass('insert_in_table')){
return $(content).insertBefore($(link).parent().parent());
}
else{
return $(content).insertBefore(link);
}
};
});
My form looks like this:
<table class="tab">
<tr>
<th>My Headers</th>
</tr>
<%= f.fields_for :line_items, :wrapper => false do |form| %>
<tr class="fields">
<td>MY FIELDS</td>
</tr>
<% end %>
<tr>
<td><%= f.link_to_add "Add more line items", :line_items, :class => 'insert_in_table' %></td>
</tr>
</table>