Nested form(cocoon gem) inside a table in rails - ruby-on-rails

Question

I'm busy with a invoicing application and i'm trying to put a nested form from the cocoon gem inside a <tbody></tbody>. The nested form is working perfectly but it doesn't show up in the <tbody></tbody> but at some random place above the table head. I think it's because you can't have <div class=nested-fields></div> inside the table body but i'm not sure how to do it differently.
i have this in my invoices/_form.html.erb :
<%= form_for #invoice do |f| %>
<% if #invoice.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#invoice.errors.count, "error") %> prohibited this invoice from being saved:</h2>
<ul>
<% #invoice.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="row">
<div class="col-sm-12">
<table class="table table-striped">
<thead>
<tr>
<th class="hidden-480"> Hoeveelheid </th>
<th class="hidden-480"> Beschrijving </th>
<th class="hidden-480"> Bedrag </th>
<th class="hidden-480"> Totaal </th>
<th class="hidden-480"> Btw(%) </th>
</tr>
</thead>
<tbody>
<%= f.fields_for :products do |product| %>
<%= render 'product_fields', f: product %>
<%= link_to_add_association 'Item toevoegen', f, :products, class: 'btn btn-primary btn-success' %>
<% end %>
</tbody>
</table>
</div>
</div>
<% end %>
invoices/_product_fields.html.erb
<div class="nested-fields">
<tr>
<td> <%= f.text_field :quantity %> </td>
<td> <%= f.text_area :description %> </td>
<td> <%= f.number_field :unitprice %> </td>
<td> €200 </td>
<td> <%= f.select(:btw, [[' 21%', 21, title: '21%'],[' 6%', 6, title: '6%'], [' 0%', 0, title: '0%']]) %> </td>
</tr>
<%= link_to_remove_association 'x', f, class: 'btn btn-primary btn-danger' %>
</div>
Invoice.rb - model
class Invoice < ActiveRecord::Base
has_one :company
has_one :customer
has_many :products
accepts_nested_attributes_for :customer, reject_if: :all_blank, allow_destroy: true
accepts_nested_attributes_for :products, reject_if: :all_blank, allow_destroy: true
validates :number, :currency, :date, :duedate, :btwtotal, :subtotal, :total, presence: true
end
Product.rb - model
class Product < ActiveRecord::Base
belongs_to :invoice
end
Invoices_controller.rb
class InvoicesController < ApplicationController
before_action :set_invoice, only: [:show, :edit, :update, :destroy]
# GET /invoices
# GET /invoices.json
def index
#invoices = Invoice.all
end
# GET /invoices/1
# GET /invoices/1.json
def show
end
# GET /invoices/new
def new
#invoice = Invoice.new
#invoice.products.build
end
# GET /invoices/1/edit
def edit
end
# POST /invoices
# POST /invoices.json
def create
#invoice = Invoice.new(invoice_params)
respond_to do |format|
if #invoice.save
format.html { redirect_to #invoice, notice: 'Invoice was successfully created.' }
format.json { render :show, status: :created, location: #invoice }
else
format.html { render :new }
format.json { render json: #invoice.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /invoices/1
# PATCH/PUT /invoices/1.json
def update
respond_to do |format|
if #invoice.update(invoice_params)
format.html { redirect_to #invoice, notice: 'Invoice was successfully updated.' }
format.json { render :show, status: :ok, location: #invoice }
else
format.html { render :edit }
format.json { render json: #invoice.errors, status: :unprocessable_entity }
end
end
end
# DELETE /invoices/1
# DELETE /invoices/1.json
def destroy
#invoice.destroy
respond_to do |format|
format.html { redirect_to invoices_url, notice: 'Invoice was successfully destroyed.' }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_invoice
#invoice = Invoice.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def invoice_params
params.require(:invoice).permit(:number, :currency, :date, :duedate, :btwtotal,
:subtotal, :total, :footer, customers_attributes: [:id, :company_name, :address_line_1, :zip_code, :_destroy],
companies_attributes: [:id, :btw_number, :iban_number, :kvk_number, :company_name, :_destroy],
products_attributes: [:id, :quantity, :description, :unitprice, :btw, :total])
end
end
Any idea what's going on? Help would be much appreciated!

Answer 1

You can simply use built in methods provided by cocoon gem for link_to_add_association,
reference:
https://github.com/nathanvda/cocoon#link_to_add_association
<%= link_to_add_association 'Item toevoegen', f, :products,:"data-association-insertion-node" => "tbody#{id of tbody encapsulating your fields_for}",:"data-association-insertion-method" => "append", class: 'btn btn-primary btn-success' %>
P.S this is my first answer in stackoverflow, so I apologize in advance if I wasn't clear enough.

Answer 2

You can refer to Control the Insertion Behaviour section of cocoon gem for more reference to insert nested fields.
For example,
$(document).ready(function() {
$("#owner a.add_fields").
data("association-insertion-method", 'append').
data("association-insertion-traversal", 'closest').
data("association-insertion-node", '#parent_table');
});