New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to give unique ID for a repeating div in a Cocoon ? #419

smartmall opened this Issue Apr 21, 2017 · 6 comments


None yet
3 participants

smartmall commented Apr 21, 2017

I need to add a unique ID for a each repeating div in a cocoon, how can i do that ? any help will appreciate


This comment has been minimized.


nathanvda commented Apr 21, 2017

Of course there are many different options, so if you explain why you need this, I could maybe point to some solutions or alternatives.

The simple answer is: use the callbacks to manipulate the HTML before/after insert and add a unique ID.

Check the following (possibly) related issues:

If you explain in more detail what you are trying to achieve and show me some code, I can give you more specific help.


This comment has been minimized.

smartmall commented Apr 21, 2017

This is my html.erb file

$( document ).ready(function() {

    document.addEventListener("turbolinks:load", function() {
        $(document).on('cocoon:after-insert', '#repeatingz', function(added_task) {
            console.log("in working"); });
        // console.log($('.repetediv').length);

$(document).on('click', '.myDivs', function () {

    var selectedRoles = $('.selected').map(function() {
        var divId =;
        var parentDivId = $(this).parents(".repetediv")[0].id;
        console.log("pA "+parentDivId);
        var roleNames = $('#'+parentDivId).find('#'+divId+' h5').text();
        return roleNames;

    var top = $(this).parents(".repetediv")[0].getElementsByClassName("rolefield")[0].id;
    console.log('top '+top);
    document.getElementById(top).value = selectedRoles;


<%= form_for @vender_shop_details,id:"form_vender_property", url: {action: "create_shop_details"} do |f| %>

<% @count =0 %>

<% @patialCount = 0%>

<% f.fields_for :usr_additional_users do |builder| %>

<% render 'usr_additional_user_fields', f: builder%>


<%= link_to_add_association 'Add new', f , :usr_additional_users , class: 'btn btn-primary repeatz', data:{association_insertion_node: '.repeating',association_insertion_method: :append } %> <%= link_to_remove_association "remove", f %>

<%= f.submit({:value=>'submit',:class => 'btn btn-primary'})%>

<% end %>


This comment has been minimized.

smartmall commented Apr 21, 2017

This is my partial view



This comment has been minimized.

smartmall commented Apr 21, 2017

This is my code. I just want to add div id for class "row" . Thank you for reply me.


This comment has been minimized.

Mirv commented Apr 21, 2017

@smartmall ... so ... we kind of understand WHAT you want, but to best answer the question, if you told us WHY you want it? What does getting the div ID allow you to do?

Also, do you get the console log messages? If you don't get the console log messages please check this document on how to trouble shoot your issue ... Trouble shooting Jquery


This comment has been minimized.

Mirv commented Apr 23, 2017

@smartmall ... I stumbled this when digging something else too ... but you have to conver tot using haml instead of ERB (I'm sure there's other ways,but haml is better in general)...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment