how to handle IE select onchange and ajax requests

Question

Let's say I attach a javascript "change" event handler to a select element, something that dispatches an ajax request to load some stuff from the server.

This is fine in Firefox. However, in IE, the change event will fire every time you scroll rapidly through the combo box options using a mouse wheel. This is troublesome because it spams the server with requests, and there's no guarantee the requests come back in the correct order, hence the client-side state may become inconsistent.

Now, our previous workaround was that we would introduce a timeout to the change handler, such that it would wait a fraction of a second before actually dispatching the request. If in that short time, another change event comes in, we cancel the previous timeout and start a new one, thus preventing spamming multiple requests.

Now, while this seems to be working, it's a bit hackish and I'm wondering if there's any better approach. Is there a different event we can hook to so that it doesn't fire repeatedly when scrolling with the mouse? Or should we just disable mouse-wheeling altogether (onmousewheel="return false;")? Firefox does not seem to support mouse-wheeling thru combo boxes, but I'm not sure if disabling mouse wheeling is a serious usability no-no or something.

Can anyone recommend other solutions?

Answer 1

you must be sending the current option value in ajax request, now if you return this value in ajax response, you can check if current selected option is same as returned by response then use it otherwise in the meantime selection has changed, wait for other response!

Answer 2

I haven't really tried this (except a few tests for answering this question), but maybe you could get it working using the onblur event. And maybe keep the onchange event in order to know whether the onblur event handler should trigger the Ajax request or not.

Answer 3

It's a little hackish, sure, but it's the best solution I've found. I use the pattern to solve several different problems including server requests, auto-saving user text entries, auto-complete text entries, spell checking etc. It's a good way to determine a pause in user interactions. Abstract the logic to an "onPause" function and it will appear less hacky :D