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().trig开发者_开发技巧ger('click');
parent_obj.find('option value[' + selected_idx + ']').click().change().trigger('click');
I ended up using prototype Event.simulate as suggested by this answer;
Trigger an event with Prototype
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'));
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.
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
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
精彩评论