Question

I’m trying to use a Prototype.js’ Form.element.observer to do some ajax on a web application. The same observer is applied to several inputs in a form (not all of them). The observer triggers an ajax that serializes the form, sends it, and ultimately replaces the form itself with a new version from the server.

For example – say there’s a country select. When a country is selected, the form is serialized, sent to the server, and the server responds with a new form, with the country selected, and a new dropdown for choosing the province, which wasn’t visible before. This new form replaces the old one, and a new set of observers is put in place (so one can choose a province and get a city select, etc)

This works ok in FF, Chrome and Safari. On IE, however, I’m having trouble with the selects. Once I click on a select, the page “loops forever”; the form is requested & replaced over and over, forever.

I strongly suspect this is related to the following piece of documentation on Form.element.observer:

This triggers the callback when the form field’s value (according to Form.Element.getValue) changes. (Note that when the value actually changes can vary from browser to browser, particularly with select boxes.)

In other words, in most browsers, the getValue property changes when someone clicks on a select’s option. I suspect on IE it behaves differently (by simply hovering over the options, no need to click on them).

Has someone found a way to “observe” a select on IE with prototype.js in a way that only triggers the callback when one of its options are really selected, as with the other browsers?

Answer 1

Using $('selectbox').observe('change', handlefunction) works cross-browser as far as I’ve tested (FF 3.6+, IE 7+, Chrome 4+).

I have actually gotten into problems with IE using Element.observe('selectbox', 'change', handlefunction) as that seems to fire before the value in the selectbox is actually changed.