Gmail like URL scheme

Question

I am working on a ticket system, having the following requirement:
The home page is divided into two sections:
Sec-1. Some filter options are shown here.(like closed-tickets, open-tickets, all-tickets, tickets-assigned-to-me etc.). You can select one or more of these filters.
sec-2. List of tickets satisfying above filters will be displayed here.

Now this is what I want: As I change the filters
--> the change should be reflected in the URL, so that one is able to bookmark it.
--> an ajax request will go and list of tickets satisfying the selected filters will be updated in sec-2.

I want the same code to be used to load the tickets in both ways-
(a) by selecting that set of filters and
(b) by using the bookmark to reload the page.

I have little idea on how to do it:
The URL will contain the selected filters.(appended after #)
changing filters on the page will modify the hash part of URL and call a function (say ajaxHandler()) to parse the URL to get the filters and then make an ajax request to get the list of tickets to be displayed in section2.
and
I will call the same function ajaxHandler() in window.onload.
I feel this is what Yahoo maps does.

What's the best way to implement such URL scheme?
Am I headed in the right direction?

Answer 1

Yeah--you're headed in exactly the right direciton, and there's a ton of work that has gone into doing this correctly across all browsers and OSes. One of the hardest parts to get right is enabling the browser's back and forward buttons to work correctly when you're using that #urlfragment syntax.

A library that provides support for such a thing: http://developer.yahoo.com/yui/history/

Answer 2

I find the google wave app's solution to be quite elegant. It's basically what you describe using a parseable url fragment. like so: http://some.domain/some/url/#filters(filter1:key1,filter2:key2);someOtherfragment;andAnotherFragment

Answer 3

Using the yui library for history is an option as mentioned in sblom's comment. You may want to consider just providing a bookmark or link button on your page that user's can click on to get to the urk if you do not want to deal with cross browser compatibility issues.

We do it here http://connect.garmin.com/explore#sortField=relevance&currentPage=1 Theres a link on the top of the map.

Answer 4

This is somewhat of a simple answer, but what you want to look at is using a hidden iframe method for your AJAX, as opposed to XHR (XMLHttpRequest Object). This will allow for the browser to maintain the history, so your back buttons will continue to work.

Some more: http://ajaxpatterns.org/IFrame_Call

Answer 5

Well if you are using jQuery there is this lovely library by Asual: jQuery Address for deep linking. They have a good API reference, and examples. It will give you all the tools you need to implement your app.

Answer 6

In Chrome, Safari and Firefox you can use HTML5 history.pushState and history.replaceState() methods

Some documentation here and here.

Answer 7

Ben Alman has built a full-featured jQuery plugin for this called BBQ. IMO, it's much better than the Address plugin.