As we all know one of the great benefits of implementing AJAX is the possibility of updating content without having to navigate to a new Web page. With this comes the drawback that the user can not come back to the last action, and doesn’t have a navigation link for his AJAX generated page.

The solution: using window.location.hash to keep information regarding AJAX action.
For example let’s say an AJAX request is done when a button is pressed in the page, and when that button is pressed the AJAX request load’s data for that buttons id, we will add required data to the window.location.hash, like this:

  1. $ ( '#book1' ) .click ( function ( ) {
  2. //add to hash data that you need to make the AJAX request later
  3. $ (window ) .location .hash =$ (this ) .attr ( 'id' ) ;
  4. $ .ajax ( {
  5. type : "POST" ,
  6. url :current_url ,
  7. dataType : "html" ,
  8. data : 'selection_id=' +$ (this ) .attr ( 'id' ) ,
  9. success : function (html ) {
  10. //do something
  11. } } ) } )

Now on page load we need to grab the hash (if it exists and make the appropriate request), like this:

  1. $ (document ) .ready ( function ( ) {
  2. if ($ (window ) .location .hash .length ) )
  3. {
  4. //we will use $(window).location.hash.replace('#','') in the "data" section of the AJAX request
  5. $ .ajax ( {
  6. type : "POST" ,
  7. url :current_url ,
  8. dataType : "html" ,
  9. data : 'selection_id=' +$ (window ) .location .hash .replace ( '#' , '' ) ,
  10. success : function (html ) {
  11. //do something
  12. } } )
  13. }
  14. } ) ;

And now you can navigate to your AJAX request.

Also I suggest using a special character at the beginning of the hash (like ‘!’), because when location.hash is changed the browser tries to move (lower) the position of the document to any DOM element with the id defined in the hash, so if hash is #book1, the browser will move (lower) the page to the DOM element, so if you use ‘!’ and have #!book1 the !book1 id doesn’t exist and you can avoid any problems.

Another idea is to integrate ‘Back’ actions for navigation, so when a user presses the ‘Back’ button of the browser, you will show the requested AJAX content. There are a couple of jQuery plugins out there had handle the hashchange event, and that you can use.