Recently I made an application that would reload the data via AJAX when data in a form was changed, standard stuff. The submit action of the form was connected to the AJAX request and the form elements have their onChange action submit the parent form.
A strange issue that we noticed was when using select elements. If you tab to one of the elements and start typing the select box will change to the option that matches what you started typing.
1 2 3 4 5
If you were to type
abc the browser would change the value of our
select box first to
abc, each time firing our
form’s AJAX submit each time. You can see how this can add unneeded
stress requests to the server, especially if you have a lot of options
in your select tag.
The solution that we came up with is to insert a delay before firing the submit action when we are dealing with the onchange handler for selects.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Then we attach it to the select elements.
1 2 3 4
So now what happens, when the select box changes, we start the timeout timer for 3 seconds, and if we get another change within the 3 seconds we cancel the first one.
Now some times we want the event to fire right away, so we can just add to the blur event and the change event for regular inputs to use a smaller time out.
1 2 3 4 5 6 7 8 9 10 11
The next thing to do would be to cancel any outstanding AJAX requests, but I’ll save that for another time.