AJAX accelerated web widgets

23 June 2005   5 comments   IssueTrackerProduct

Powered by Fusion×

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" />

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)


Pete Wilson
I'm using Firefox version 1.0.4.

When I press the "Show filter options" button the filter options show up with, among other things a button that says "Hide filter options" when I press the button the filter options dissapear, but the menubar shows up in it's place. This creates a nested menubar efect. I have repeated this upto four times to get four nested "Real Issue Tracker" menu bars.

I don't know if this is repeatable on your set up, but I thought you might like to know

Peter Bengtsson
Really?! I can't reproduce this on my firefoxes (windows, linux) but I only have firefox 1.0.2. Can you send some screenshots perhaps? (you can upload them on http://real.issuetrackerproduct.com/AddIssue)
It looks like the menu bar gets repeated with Safari, too, although it seems to max out at one repeat.
Peter Bengtsson
I've managed to reproduce it! I'm using my girlfriends windows xp computer with firefox and it happened like you described.

Now for fixing it... hm..
Thomas Hansen
You could do the same with a Timer control 100% declarative in ASP.NET using http://ajaxwidgets.com
But that requires you to use ASP.NET though... ;)

Your email will never ever be published

Related posts

Zope compared to PHP 22 June 2005
Zope in DevelopmentMode 26 June 2005
Related by keywords:
One hot ear 28 October 2003
The awesomest way possible to serve your static stuff in Django with Nginx 24 March 2010
Never put external Javascript in the <head> 02 April 2013
Data Structures and Algorithms in Python 15 October 2003
Lazy loading below the fold 26 October 2013
File attachment widget with Javascript 25 February 2005
jQuery and Highslide JS 08 January 2008
Changing the size of a textarea box 18 August 2004
window.onload from before 07 June 2005
EmailInput HTML5 friendly for Django 02 August 2011
Autosaving textarea with AJAX 16 May 2005
WEBoggle mind bogglingly addictive 20 February 2004