Spree: Do JQuery events need registration?

Question

Hello to the Community,

I want a change in an HTML select tag to trigger a Javascript event in my Spree application.

The view contains a collection_select instruction resulting in the following HTML:

<select id="dummy_id" name="something">
    <option value="">Please select</option>
    <option value="1">Case1</option>
    <option value="2">Case3</option>
    <option value="3">Case3</option>
</select>

I wrote the following Javascript function:

$('#dummy_id').change(function () {
    alert("It works");
});

I checked in this jsfiddle that the code indeed works.

When I run the application, the event is not triggered. I googled a lot to try and find documentation regarding a possible registration.

Question: does the event need some sort of a registration? If yes, where to place it and what should this code look like ? If not, any clue as to why it works fine in jsfiddle but not in RAILS_ENV="development" ?

Kind regards !

score 1 · Answer 1 · answered Nov 02 '13 at 04:58

You can have multiple ones, but it's not always the neatest thing to do. Try not to overuse them, as it will seriously affect readability. Other than that , it's perfectly legal. See the below:

Like we can have:

$(document).ready(function() {
    alert('first one!');
});

$(document).ready(function() {
    alert('second one!');
});

$(document).ready(function() {
    alert('third one!');
});

but we should do this as below:

 $(document).ready(function() {
        alert('first one!');
        alert('second one!');
        alert('third one!');
    });

but when we have reason where we are in situation like we need to use it again, then we can use it definitely. However, I don't think you can know in which way they will be executed.

for reference you should go through this ... Multiple $(document).ready()

score 1 · Accepted Answer · edited May 23 '17 at 12:29

You need to wrap your jQuery code into an ondocumentready ($(document).ready()) function, because jQuery's selectors will only work, when the DOM is constructed and can be traversed, otherwise something like $('#select-product-in-persomodel_form') will result in an empty array.

In jsFiddle you can specify when your JS code should be executed (dropdown in the left menu). You seem to have chosen "No wrap - in <body>", that will result in you code added as a script element last in the body, not wrapped in any $(document).ready() or $(window).load()

Calling unwrapped selectors in this place is by no means safe - the DOM is not ready at this point - but might work depending on your browser and luck. If you change this to "No wrap - in <head>" your code will stop working at all, because while parsing the <head> your elements will definitely not have been defined.

As for your other question: You can have multiple $(document).ready() without worries, they will be executed in order of their calls. See also here.

score 0 · Answer 3 · answered Nov 02 '13 at 01:25

I found the solution: the JS code needs to be changed from:

$('#dummy_id').change(function () {
    alert("It works");
});

to:

$(document).ready(function() {
  $('#select-product-in-persomodel_form').change(function() {
    alert("Updating the variants selector for Anacondano");
    $("#persomodels-variant-select").html(" <%= escape_javascript(render 'variant_select') %>");
  });
});

Caution: I assume that one Rails application can hold several $(document).ready entries. This is a point that I still need to check. Input welcome.

Spree: Do JQuery events need registration?

3 Answers3