jQuery Ajax History URL Plug-in

I’m working on a change to Fido Finder that will turn the search results filtering into an Ajax query instead of posting a full page. No big deal. But, since the interface allows a user to narrow/alter existing search results I want to give them a way to use their Back button to go back to the previous search result.

If you do not already know, this is done by adding  a hashtag (#) and a querystring to your existing URL. Browsers allow us to modify this part of the address so adding a hashtag and modifying what is after it became a way to hack history into Ajax websites.

I looked around for a simple jQuery plug-in to add the hashtag and handle state and after trying 2-3 I finally ran into one that was easy to set up and adhered to Google’s guide for making Ajax pages crawlable. The plug-in is called URIAnchor.

In my implementation all I needed to add to add color and size to the URL is this code:

$.uriAnchor.setAnchor({
     colors:colors,
     size:size
});

You can also then read the hashtag querystring values upon page load (back button) and execute the Ajax using the data from the URL.

var map = $.uriAnchor.makeAnchorMap();

if($.isEmptyObject(map))
{
     ready = true;
     return;
}

var size = map.size;
var colors = map.colors;