jQuery change() not firing prototype event handlers

Question

I have an existing prototype codebase that does stuff on selectbox changes...

I have used jQuery that generates (styled) unordered-lists and I wish to proxy clicks to that list to my selectbox... This all works fine (calling val() on selectbox), but prototype doesnt pick up on these changes, even when I explicitly call change() on the selectbox... Anyone know what is going on?

I could post a bunch of code but it is all very basic, I think the only relevant part is:

parent_obj.val(selected_idx).change();

Which does change the selected item in my selectbox, but doesn't fire my prototype event handler.

edit:

There will probably be an answer about using trigger() etc... that doesn't seem to work either:

parent_obj.val(selected_idx).click().change().trigger('click');
parent_obj.find('option value[' + selected_idx + ']').click().change().trigger('click');

score 3 · Accepted Answer · edited May 23 '17 at 12:06

3

I ended up using prototype Event.simulate as suggested by this answer;

Trigger an event with Prototype

edited May 23 '17 at 12:06

Community

1
1

answered May 30 '11 at 14:53

Daniel Sloof

12,568
14
72
106

score 2 · Answer 2 · answered Jun 29 '16 at 12:07

2

I solved the problem by using a mix of jQuery and vanilla Javascript

parent_obj.val(selected_idx);
parent_obj.get(0).dispatchEvent(new Event('change'));

answered Jun 29 '16 at 12:07

minlare

2,454
25
46

score 1 · Answer 3 · answered Mar 18 '11 at 12:35

1

All trigger (or change, which is just a shortcut for trigger('change')) does is calling the bound jQuery event handlers. Changing a value from javascript does not trigger handlers either (think of all the infinite loops that could cause!). In general, there is no reliable way of triggering events from javascript. You probably should use a single framework to do your event handling. Otherwise, you should find Prototype's equivalent of trigger and call it manually.

answered Mar 18 '11 at 12:35

Tgr

27,442
12
81
118

I -am- using a single framework to do event handling. I want to be able to fire one event from the other framework though... Though me saying this is no longer needed, as I have found my answer in the following link: http://stackoverflow.com/questions/460644/trigger-an-event-with-prototype Event.simulate will suit me just fine. – Daniel Sloof Mar 18 '11 at 12:41

score 0 · Answer 4 · answered Feb 12 '16 at 20:59

So, the solution is to use "simulate.js" because you cannot fire an event registered on prototype with jQuery.

After struggling some minutes, i realized that in order to "simulate.js" works on select option, it needs to be selected the option you want first In my example i want to the last option would be selected by default

$$('select#shipping_method option').last().selected=true;
$$('select#shipping_method option').last().simulate('change');

Greetings

score 0 · Answer 5 · edited May 23 '17 at 12:00

0

Likely you need to look at the use of jQuery.noConflict() here, then ensure isolation. http://api.jquery.com/jQuery.noConflict/

See this post on protype event stuff: Trigger an event with Prototype

edited May 23 '17 at 12:00

Community

1
1

answered Mar 18 '11 at 12:14

Mark Schultheiss

32,614
12
69
100

There is no conflict. Both code work just fine, I am already using noConflict and an anonymous wrapper function for jQuery (function($) { ... })(jQuery); - the problem is in getting prototype event handler to fire after making changes with jQuery. – Daniel Sloof Mar 18 '11 at 12:35
It might also help to have a function outside of both that you call from jQuery to trigger the prototype event handler then. – Mark Schultheiss Mar 18 '11 at 12:42

jQuery change() not firing prototype event handlers

5 Answers5