AJAX accelerated web widgets
23 June 2005
Now I've done it again (actually it was a couple of days ago but I've had time to write about it until now). When you on the IssueTrackerProduct, list issues you'll see a little button that makes it possible to enable "filter options". If you press that button it sets off a
GET request to the server to re-request the same page but this time with
ShowFilterOptions=true as a parameter. Here's some simplified code:
<div id="filteroptions"> <form action="ListIssues"> <input type="hidden" name="ShowFilterOptions" value="1" /> <input type="submit" value="Show filter options" /> </form> </div>
How can we load the filter options widget on the List Issue page without having to refresh the whole page?
The answer is to use AJAX. The trick is to not require that AJAX works. Here's how I solved it. On the submit button I included an
onclick and an
onkeypress event attribute like this:
<input type="submit" value="Show filter options" onclick="return loadfilteroptions(this.form)" onkeypress="return loadfilteroptions(this.form)" />
The clever thing about this is the browser will now only submit the form (and hence a new request) if the function
Now in the
loadfilteroptions() function, all I have to do is to tell if the AJAX trick worked or not. If I was able to load the separate widget there is no need to refresh the whole page so I return
false. If for example, it's an Opera 7 user the AJAX request will have failed so I then return
true which means that the browser should pursue with processing the form submission.
The resulting product is that if you have a decent browser that supports AJAX it takes virtually no time at all to open (or close) the filter options widget. If you have an old browser like (Opera 7, Lynx or Netscape Navigator) you'll just have to live with that it takes a few more seconds to reload the whole page.
Try it! (press the "Show filter options" button)