One of the most annoying things in AJAX based applications is clicking the back button and going back to a previous url and not the previous state of the application.
Users are trained at clicking the back button if they went to the wrong place and need to get back to the last place they were at. Even when I know I'm using an AJAX app, I would click it by mistake.
What happens when uses click the back button in your AJAX application?
I've worked on a lot of back office web applications and when an application uses AJAX with only one real page (in the same way gmail does), clicking back will usually take you to the login screen, and that's not where you wanted to go.
Adding History to an AJAX application
Fortunately, this problem has been solved. You can manipulate the browser history and control what happens when a user clicks the back button.
Even better, Microsoft’s AJAX library adds easy support for setting history points and going back to them, so you don't have to write the code yourself.
Let’s take a look at the AJAX search sample, where we had next and previous buttons to navigate the search results.
Whenever a results page is shown I want to add a history point.
Here's the code I'll use to set a history point in JavaScript:
Sys.Application.addHistoryPoint({showPage:pager.CurrentPageIndex},'MyTakeOnNet - Search Results - Page ' + pager.CurrentPageIndex);
Sys.Application.addHistoryPoint takes two parameters, the first one can be any object you want, you will use this object to decide what to do when the user goes back to this history point. the second parameter is the title of the page.
If you add this line of code to the pager's ShowPage method, you'll see the history button's drop down will have a new entry for each page.
Handling the history navigation
Every time a user navigates through the browsers history by clicking the back button or selecting a history point from the back buttons drop down, the MS AJAX library raises an event.
To subscribe to this event, add the following line of code when the page loads.
Sys.Application.add_navigate(onNavigate);
and add the onNavigate function to handle the event
function onNavigate (sender, e) { //get state and make change to application var state=e.get_state(); if (typeof(state.showPage) != 'undefined') { if (pager.CurrentPageIndex != state.showPage) pager.ShowPage(state.showPage); }}
The get_state() call will return the object you saved as the first parameter of the history point, you can then use this parameter to show the page.
Pretty simple, right?
It does get more complicated if you remember that a user might execute several searches and page through them, so the search parameters should be saved as well with the history point.
You have to make sure you cover the entire state of you AJAX enabled page to make sure you can re-create that state when the user clicks the back button, but at least you don't have to write the code to deal with the browser's history
Subscribe