25 July, 2009

Navigation on Ajax websites using browser's next and previous buttons

On this post I am talking about some problem which I had and resolved myself while coding up Ajax websites. Normally when it comes to Ajax what comes to my mind is that removing page refreshes. Ajax websites are websites which works more like web applications, the user interaction is handled using asynchronous calls to the respective servers. On this post I am talking about the navigation in a Ajax website using the next and the previous buttons of the browser.

Lets assume we are working out a website for selling a particular product or service, which contains a form which we process in 4 different steps. The first step might ask some questions from the user about what he needs. On the second step they will get a list of relevant products or service packages and hey selects one. Third step they will enter their details, fourth step they will do the payments and finish the deal. Now as we are using Ajax there will be no page refreshes in between these steps, that means the browser just will stay on the same page or in other words the document.location will be the same.

Lets assume a user comes to my website, and he goes to the second step, oh!! he realizes that he has not entered some data on the first step correctly, what I feel is that in this case he will click on the browser's back button though a back button is given on the form. Wow lets say the first step form is the first page of the website as well, and then what happens is once the user clicks the back button he will get some other website which he was viewing previously without getting the first step of the form.

Now what can we do about this situation? This can be answered. Now if you use Gmail you will see a very complex Ajax application, and when you click something note that the browsers hash is being changed, it is the same thing which happens when you click on an anchor in the same page. I will make it more simple, our approach should be like this,

URL of our website = http://mysite.com
URL of our second step = http://mysite.com#product_options

The text which comes after the hash is called the URL hash, and it can be accessed by javascript using the following

document.location.hash

The advantage is that if you change the hash dynamically your web page will not be refreshed. And the changes to the hash will be in the history. So using next and previous buttons of the browser you will be able to navigate among the respective hashes.

To program such a thing what you have to do is to have a listener for the browser hash, easily you can do it with a code like below.


$current_hash = '';

function hash_listener(){

$new_hash = document.location.hash;
if($new_hash != $current_hash){
$current_hash = $new_hash;

// Do whatever javascript functions you need to.

// After that remember to change the hash of the browser.
window.location.hash = 'second_step';

}

}

okay!! now above is our listener, and still we have to bind it, we shall use the setInterval function for that.

window.setInterval("hash_listener", 500);

Now our Ajax website's users will be able to navigate using the browser's next and previous buttons.

If you carefully look at the listener you will find that I am updating the hash from my javascript. but if you are going to use anchor tags you will be able to achieve the same thing.

I wish this information will be useful for you.

No comments: