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)

Comments

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

-Pete

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)

Anonymous

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