Unique Nested Child Identifiers for Tab Links using Twitter Bootstrap & Cocoon

Question

I have a Ruby on Rails application with Twitter Bootstrap tabs within a partial, and multiple instances of that partial can be added by the user using Simple Form and Cocoon.

In order for the tab links to work properly, I must have unique names for the tabs in each new child of the partial (so that clicking on a particular tab activates its own unique content and not content for the tab of the same name in the preceding child partial appearing on the same page).

I saw that code was added to Cocoon to accomplish this objective here: https://github.com/nathanvda/cocoon/pull/100 .

In that discussion there is an indication that the new functionality was tried out on the Cocoon Simple Form Demo project. But whatever changes were made in the process of trying out the new functionality were not committed there (at least as far as I could tell).

Looking at the commit on github, that addition seems to have been accomplished in the Cocoon javascript code by adding '[contentNode]' to the parameters on the 'insertionNode.trigger' call (https://github.com/woto/cocoon/commit/cb206d501e4749a05e0c1d868911da159c8200c1):

insertionNode.trigger('cocoon:before-insert', [contentNode]);

I am not very sophisticated with this stuff.

So, how do I implement/grab the unique identifier for each new instance of a nested child?

Any help or direction would be much appreciated.

Here is the code from my application for reference:

-# /app/controllers/parent_records_controller.rb

class ParentRecordsController < ApplicationController

  # GET /parent_records/1/edit
  def edit
    @parent_record = ParentRecord.find(params[:id])
    @parent_record.items.build
  end
end

-#/app/views/parent_records/_form.html.haml

.row-fluid
  =simple_form_for(@parent_record, :wrapper => :inline4, :html => {:class => 'form-inline', :multipart => true}) do |f|
    .row-fluid
      = f.simple_fields_for :items do |item|
        =render :partial => '/parent_records/form_partials/item', :locals => { :f => item }
      .row
        .span2.offset9
          = link_to_add_association 'Add Another Item', f, :items, :class => 'btn btn-primary', :partial =>     'parent_records/form_partials/item'
    = f.button :submit , :class => 'btn btn-success'

-#/app/views/parent_records/form_partials/_item ------ THE TAB HREF NAME IS WHERE I NEED THE UNIQUE IDENTIFIERS ------

.nested-fields
  .well.span
    .tabbable
      %ul.nav.nav-tabs
        %li.active
          %a{"data-toggle" => "tab", :href => "#tab1"} Item Info 
        %li
          %a{"data-toggle" => "tab", :href => "#tab2"} Pictures

      .tab-content
        #tab1.tab-pane.active
          = f.input :short_name,:label => 'Item Title'
          = f.input :brand,:label => 'Brand'
          = f.input :description,:label => 'Description' 

        #tab2.tab-pane
          = f.simple_fields_for :pictures do |picture|
            =render :partial => '/parent_record/form_partials/picture', :locals => { :f => picture }
          .span2.offset9
            = link_to_add_association 'Add A Picture', f, :pictures, :class => 'btn btn-primary', :partial =>     'parent_records/form_partials/picture'
      .span2
        = link_to_remove_association "Remove Item", f, :class => 'btn btn-danger'

-#/app/views/parent_records/form_partials/_picture

.nested-fields  
  .well.span
    = f.input :image,   :label => 'Seclect Image to be Uploaded'
    = f.input :rank,    :label => 'Image Rank for this Item'
    .row
      .span2
        = link_to_remove_association "Remove Picture", f, :class => 'btn btn-danger'

EDIT / FOLLOW-ON QUESTION:

Nathan's answer below worked for adding unique identifiers, but adding the unique identifiers has broken Bootstrap's tabbing functionality. That seems to make some sense given my impression that the Bootstrap javascript is probably only assessing the correspondence between tabs and links when the document initially loads.

Can anybody point me in the direction of how to get the Bootstrap javascript to reinitialize and find the new ids and links??

EDIT2

Turns out (I think) that it was the div .well.span separating .nested-fields and .tabbable that prevented Bootstrap from being able to initialize the newly named href and tab ids. Crazy journey, but satisfying in the end.

Answer 1

First off, in the cocoon_simple_form_demo project, you will see the last commit adds animations, using the cocoon:before-insert or cocoon:after-insert event.

The after_insert event gives you the DOM element that is inserted, so you can do whatever you like with it, e.g. fill in a unique href.

So in your case, that would be something like the following (note: completely untested code, but I hope it gets you going) :

$('form').bind('cocoon:before-insert', function(e,item_to_be_added) {
    new_id = new Date().getTime();
    item_to_be_added.find('a[href="#tab1"]').attr('href', "#tab1_" + new_id);
    item_to_be_added.find('#tab1').attr('id', "tab1_" + new_id);
    // do the same for #tab2
});

This just standard jquery DOM-manipulation. Hope this helps.

You could either re-trigger the tabs behaviour after insert (this needs to be after-insert, other wise there is no use):

   $('form').bind('cocoon:after-insert', function(e,item_to_be_added) {
       $('nav-tabs a').click(function(e) {
         e.preventDefault();
         $(this).tab('show');
       }); 
   });

You already should have code like this? The other alternative is to use the better on, like this:

$('form').on 'click', '.nav-tabs a', function(e) {
    e.preventDefault(); 
    $(this).tab('show');
});

This should have to be done only once, when the page is loaded, and this will keep on working when tabs are added.

HTH.