JQuery change () does not fire prototype event handlers

Question

I have an existing prototype code base that does something with changes to selectbox ...

I used jQuery, which generates (stylized) unordered lists, and I want proxy clicks on this list on my selectbox ... It all works fine (calling val() on selectbox), but the prototype does not accept these changes, even when I explicitly calling change() on selectbox ... Does anyone know what is going on?

I could post a bunch of code, but it's all very simple, I think the only important part:

parent_obj.val (selected_idx). Button ();

Which modifies the selected item in my selection window, but does not start my prototype event handler.

edit:

There will probably be an answer about using trigger (), etc., Which 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'); 

Answer 1

I ended up using the Event.simulate prototype suggested by this answer,

Run prototype event

Answer 2

All trigger (or change , which is just a shortcut to trigger('change') ), calls jQuery event handlers. Changing the value from javascript also does not call handlers (think of all the infinite loops that might cause!). In general, there is no reliable way to fire events from javascript. You should probably use a single structure for handling events. Otherwise, you must find the equivalent of the Prototype trigger and call it manually.

Answer 3

I solved the problem using a combination of jQuery and vanilla Javascript

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

Answer 4

You probably need to look at using jQuery.noConflict() here, and then provide isolation. http://api.jquery.com/jQuery.noConflict/

See this post in the prototype event material: Run the prototype event

Answer 5

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

After several minutes of work, I realized that in order for "simulate.js" to work on the selection option, it must be the one you want first. In my example, I want the last parameter to be selected by default

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

Hello