Dealing with Ajax and the Back Button - J Query

Populating web pages using Ajax creates a convenient, interactive user experience, which can’t be replicated with traditional HTTP requests. Unfortunately, each time you update the contents of the browser window with Ajax, that content becomes inaccessible to the back and forward buttons of your browser. The book marking functionality found in most browsers is also rendered nonfunctional.


The solution to this problem is to relate each Ajax request to a unique URL. This URL can then be book marked and accessed by the back and forward browser buttons. One method for doing this is to use hash values. Hash values are generally used to link into a specific position within a document. wiki/Apple#History links to the history section of the Wikipedia page for Apple. For the purposes of this recipe, the hash value will refer to content loaded by an Ajax request.
In this example, the sample project is a small glossary. It has three entries. When you click each entry, the definition for the word is retrieved and displayed via Ajax. Granted, the content could easily be displayed all at once on a single page. However, this same approach is appropriate for larger, more varied data, such as the contents of each tab in a tabbed interface:

Necessary JavaScript files are included in the head of the document. The jquery.history.js file contains the jQuery history plugin (available at There is an anchor element for each of the three entries in the glossary. The definition for each entry will be displayed in the paragraph with an id of definition:

The history plugin has two functions that are of concern: init() and load(). The init() function is called inside the ready function. A callback to handle Ajax requests is passed in as an argument. load() is bound to the word links. The content of each anchor tag is passed in as an argument. The callback historyLoad() takes care of requesting the content for the passed-in hash value. It also needs to be able to handle instances where there is no hash value.

There are two instances when the historyLoad() callback is called. First, it is called inside the $.history.init() function, when the page is loaded. The hash value is stripped from the end of the URL and passed as the argument. If there is not a hash value present, the argument is empty. The load() function also calls historyLoad(). The argument we pass to $.history.load(), the word we clicked, in this case, is passed on as the hash argument to our callback.
In this solution, a jQuery plugin was used. It is relatively easy to implement similar functionality without a plugin, by using JavaScript’s window.location.hash object. The jQuery history plugin comprises only 156 lines of code. The reason it was chosen over writing a solution from scratch is that a large part of the plugin code handles cross browser in consistencies. When handling browser differences, it’s often more effective to draw from the communal pool of experience that accumulates in a plugin than try and to account for every implementation discrepancy oneself.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics