Question

I have a page with a lot of dynamically generated check boxes on it. As the users click these check boxes a lot of content on the page changes dynamically via ajax. The end users are complaining that after hitting submit and then hitting the back button to change something, their selections are blown away and they have to do it all over again.

I have seen a few sites (gmail, facebook, etc…) use the hash symbol in the URL to hack the back button so that it performs AJAX calls instead of going back to the previous full page request. I would like to do this to modify the URL before the page submits so that hitting the back button will load their previously selected fields.

For instance:

In Gmail if I am viewing my inbox then my URL looks like this: https://mail.google.com/mail/?shva=1#inbox

Then if I click “Sent Mail” an AJAX call is performed and my URL is modified to look like this: https://mail.google.com/mail/?shva=1#sent

I really like this behavior and want to duplicate it. How is this accomplished?

1. Do your links actually trigger any javascript or do they just link to the URL with the appropriate hash symbol information?

2. How do you read in the hash symbol info in javascript?

3. How does this type of navigation affect search engines? Would a search engine know that two URLS that are the same except for the information after the hash are actually different URLs and index them as such?

4. What are some other pros and cons of this technique that I should take into consideration?

NOTE: I am using C# with ASP.NET Web Forms and ASP.NET MVC 3.0 in case that matters at all.

Answer 1

JQuery plugin:
http://tkyk.github.com/jquery-history-plugin/

Another jQuery library that I have used in the past:

jQuery BBQ: Back Button & Query Library

Also, a more scaled down version of the previous if you don’t need all it’s features and just gives you the hashchange event for all browsers:

jQuery hashchange event

NOTE: Just as a brief intro to the above libraries. The hashchange event is supported natively by newer(HTML5 supported) browsers in which case the scripts will just bind to that event. For older browsers that don’t support that event, the script creates a polling loop to simulate the event. In either case you can bind to the event and handle appropriately.

EDIT: To answer your questions:

1. The links do not trigger javascript, links simply change the url with the hash. The hashchange event monitors this action, and when the hash changes(which is logged in browser history stack) the event fires.
2. location.hash is used to read the hash value, and any appropriate parsing you would need from that point.
3. Probably not SEO savvy enough to give you a complete answer on that, but fairly sure search engines DO NOT index hashes.
4. Pros for this technique is usability as your users will be able to properly use their back buttons. Also any history.back(0) javascript calls will also work properly(i don’t like them but people use them). Cons are that as you’re initially developing, you can get some quirky bugs depending on how your code is written. All in all though, I think with the use of the plugins much of the legwork has been taken out of the process and it is a great method for usability purposes.