3

pls show any example of using Cocoon's 'link_to_add_association' with html_options. https://github.com/nathanvda/cocoon

Documentation says:

html_options: extra html-options (see link_to) There are two extra options that allow to conrol the placement of the new link-data:

    data-association-insertion-node : the jquery selector of the node
    data-association-insertion-position : insert the new data before or after the given node.

But i can not understand what to do, if i want insert partial just before my "add element" link. Not just after parent's div begin. This not gonna work:

<%= link_to_add_association "add element", f, :production_years, :position => "after_all" %>

Bryan Ash
  • 4,385
  • 3
  • 41
  • 57
BazZy
  • 2,429
  • 3
  • 21
  • 26

2 Answers2

9

I will admit that is a bit obscure, and maybe I should provide an example in the code.

In your application.js you should write something like:

$(document).ready(function() {
    $("a.add_fields").
      data("association-insertion-position", 'before').
      data("association-insertion-node", 'this');
});

where a.add_fields will select your clickable link. I have only recently updated the readme with a better explanation how the insertion can be handled.

Hope this helps.

nathanvda
  • 49,707
  • 13
  • 117
  • 139
  • I thought it was well-documented https://github.com/nathanvda/cocoon#control-the-insertion-behaviour (or at least better than before). – nathanvda May 06 '14 at 01:18
6

If you want to do it using data-attributes you can do:

<%= link_to_add_association 'Add Item', f, :items, :data => {"association-insertion-method" => "before" } %>
patrickdavey
  • 1,966
  • 2
  • 18
  • 25
  • If you use `:data =>` You can not use jquery functions to get the association-insertion-node. Such as `data("association-insertion-node", function(link){ return link.closest('.row').next('.row').find('.sub_tasks_form') });` – DrevanTonder Mar 12 '17 at 23:23