As fancy AJAX websites become more popular, the "back" button is getting less useful and less functional. Often times you perform an action that perhaps repaints most of the browser window (think, viewing an email in Gmail), and you want to go back to your preview view (list of email in your inbox). In the old days, you would hit back and go to the previous page. But in Gmail and other AJAX-ey sites, you didn't go to a "new page" but instead had javascript repaint the divs. So hitting back would take you to the login screen or some other site. Fortunately Gmail has solved this by inserting various actions into your browser history, so that you can actually use the back and forward buttons to navigate through Gmail.

jQuery has a good history plugin that lets you add actions to the browser history, and on every page load you can register for a callback that gives you a value based on where you are in the history. It is up to you to write your JavaScript in a generic way that can save and respond to history save points. But jQuery does the cross-browser, behind the scenes heavy-lifting for you.

My use of the history plugin was for a tabbed navigation where the tabs were all done using JavaScript to show/hide divs. It became a problem when a user would load the page, click a different tab, and while viewing that 2nd tab, click a link to another page. Then the user would click back and expect to be on that 2nd tab again, but instead would be shown the first tab.

Here is some sample code that I used to easily solve this issue and add back/forward support for my AJAX tabs:


var default_tab = 'home'; // this can be set by query string, url, etc

function on_page_loaded( history_key )
{
  if( history_key )
  {
   // this gets run for every back/forward, if something was stored in
   //  the browser history's location.hash
   toggle_tab( history_key );
  }
  else
  {
    // this gets run for every page load where back/forward is not pressed
    toggle_tab( default_tab );
  }
}

jq(document).ready( function() {
  // Initialize history plugin, and give it the function name 
  //  of your callback above
  jq.historyInit( on_page_loaded );
  
  jq('a.tab_with_history').click( function()
     {
        // actually toggle the tab in UI
        var tab_name = toggle_to_selected_tab( this );
        // save to the history, the tab name -- important step!
        jq.historyLoad( tab_name );
        return false;
     });
});


I will leave "toggle_tab" and "toggle_to_selected_tab" implementation to you as an exercise. I created a custom tab class with initialization methods that are generated from Ruby hashes and then toggling tabs is just a matter of finding the tab by name and flipping some css display values of the corresponding divs that each tab owns

HTML:


<ul>
 <li><a id="tab_1" class="tab_with_history" href="#1">Tab 1</a></li>
 <li><a id="tab_2" class="tab_with_history" href="#2">Tab 2</a></li>
</ul>

<div id="content_1" style="display: none">contents of tab 1</div>
<div id="content_2" style="display: none">contents of tab 2</div>