You should never forget your (browser) history

by ishaih 2/18/2008 11:44:00 AM

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
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Currently rated 4.7 by 3 people

  • Currently 4.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

AJAX | Asp.Net | Javascript

Related posts

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

1/6/2009 5:27:05 PM

Powered by BlogEngine.NET 1.3.1.0
Theme by Mads Kristensen

About the author

Name of author Ishai Hachlili
I've been developing web applications using Microsoft technologies for over 10 years. This is my way of doing things, it might be a little different...

E-mail me Send mail

Calendar

<<  January 2009  >>
MoTuWeThFrSaSu
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar

Pages

    Recent comments

    Authors

    Disclaimer

    The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

    © Copyright 2009

    Sign in