Why cocoon in my code not capturing callbacks?

Question

I have a functional nested form in ruby make with cocoon. The problem is that I am trying to use before-insert and after-insert and it does nothing.

My miew:

<div class="row" id="street_enter_itineraries">
          <table>
            <div class="street_enter_itineraries" >
              <%= f.fields_for :street_enter_itineraries do |builder| %>
                <%= render 'street_enter_itinerary_fields', f:builder %>
              <% end %>
            </div>
          </table>
            <div class="row">
              <%= link_to_add_association  "Añadir calle de entrada",f, :street_enter_itineraries, class: 'btn btn-info', data: {association_insertion_node: '.street_enter_itineraries', association_insertion_method: :append}  %>
            </div>
          </div>

My javascript

 $(document).ready(function() {
    $('#street_enter_itineraries')
        .on('cocoon:before-insert', function() {
            var allIds= document.getElementsByClassName("tipocalleentradaidentificar");
            if(allIds.length > 3){
                event.preventDefault();
            }
        })
        .on('cocoon:after-insert', function() {
            refreshID();
        })
});

I have seen this post: Cocoon add association, how to limit number of associations because of it is what I want to do. I have tried this option too, and console is empty:

 $(document).on('cocoon:after-insert', '.content form', function(e) {
    console.log('Something');
});

Thanks in advance.

Are you using turbolinks? The bottom should always log something, if you would have a class `.content ` containing the form, is that the case? — nathanvda, Feb 22 '19 at 07:56

nathanvda · Answer 1 · 2019-02-22T08:59:22.897

1

Your jquery selector is wrong, you forgot the # at the start to signify searching for an id. So you wrote $('street_enter_itineraries') and you should write

$('#street_enter_itineraries')

[EDIT] Making the js turbolinks is relatively easy, either make sure it is triggered upon turbolinks:load, instead of using the document ready event (in your case probably the easiest)

$(document).on('turbolinks:load', function(e) {
    $('#street_enter_itineraries') ...
})

or register the cocoon handlers on the document with the correct selector:

$(document).on('cocoon:before-insert', '#street_enter_itineraties', function(e) {
   // do something here
}

edited Feb 22 '19 at 08:59

answered Feb 21 '19 at 20:41

nathanvda

49,707
13
117
139

maybe it has lost the slash because of several attemps, but is not working although I put it – antonio vazquez Feb 22 '19 at 07:12
Then maybe it is a turbolinks issue? Your js code is not turbolinks-safe, it will only work on first load, and then your page might not yet contain the correct elements. – nathanvda Feb 22 '19 at 07:59
And do you know how can I make it turbolink-safe? I'm quite young in ruby and it is the first time I hear about it – antonio vazquez Feb 22 '19 at 08:36
I updated my answer how to make it turbolinks compliant. – nathanvda Feb 22 '19 at 11:06

Why cocoon in my code not capturing callbacks?

1 Answers1