Unable to append fields in table with cocoon

Question

I am using cocoon to add nested attributes. I have following code in my view:

<table>
  <thead>
  <tr>
    <th>Title</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody id="emergency_personnels">
    <%= f.fields_for :emergency_personnels do |emergency_personnel| %>
      <%= render 'emergency_personnel_fields', f: emergency_personnel %>
    <% end %>
  </tbody>
</table>
<%= link_to_add_association 'Add emergency personnel', f, :emergency_personnels, data: {"association-insertion-node" => "tbody#emergency_personnels", "association-insertion-method" => "append"} %>

It should work fine but the new fields are not appending under the tbody of the table instead it appears outside the table.

Can anybody suggest a solution for it. Thanks

Answer 1

As per cocoon documentation: insertion-behaviour

Default behavior:

The default insertion location is at the back of the current container.

If you want to add to a custom location, then we can achieve this by two data attribute:

association-insertion-method where to add it

association-insertion-node where to add it in relation with the node

Here is the example:

$(document).ready(function() {
    $("#owner a.add_fields").
      data("association-insertion-method", 'append').
      data("association-insertion-node", '#parent_table');
});

NOTE:

if you want to add templates to the specific location which is:

• not a direct parent or sibling of the link
• the link appears multiple times - for instance, inside a deeply nested form

You need to specify association-insertion-node as a function. For example

$(document).ready(function() {
    $(".add_sub_task a").
      data("association-insertion-method", 'append').
      data("association-insertion-node", function(link){
        return link.closest('.row').next('.row').find('.sub_tasks_form')
      });
});