AJAX accelerated web widgets

To me, AJAX (Asyncrounous Javascript And XML) patterns are only interesting if they work as a bonus rather than a must. I've written before about autosaving web forms whereby a form with a big textarea is autosaved on the server every 8 seconds. That feature took existing form functionality and used it in Javascript instead of user actions.

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 loadfilteroptions() returns true. 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)