Fixing the back button for Ajax apps to enable bookmarking into history – jQuery, ASP.NET Ajax, YUI & other ways


Most of you might already be aware of the paradigm shift problem in ajax apps in terms of the browser back button not working out of the box.

The problem and some of the generic solutions to it is described in more detail in the following articles. Suffice is to say that by integrating ergonomic display features such as back and forward navigation, we can make it simpler and more intuitive for the end user to immerse into the richer internet applications (RIA) that we can now create:

Fixing the Back Button and Enabling Bookmarking for AJAX Apps

AJAX: How to Handle Bookmarks and Back Buttons, Advanced Example

Fixing the back button that AJAX broke

AJAX: How to Handle Bookmarks and Back Buttons

How to build a cross-browser history management system

Now here’s Microsoft’s effort in solving the problem with the help of ASP.NET AJAX library:

Enable Back button support in ASP.NET AJAX web sites – This is a server-centric solution that gets translated into client side history management code.

Managing browser history from client script

ASP.NET AJAX History Part 2: Client-Side

AJAX History and ASP.NET AJAX Preview 3

Client History Points in ASP.NET 3.5 Extensions

The link below is a Yahoo Developer Network effort in attending the issue:

YUI 2: Browser History Manager

Now onto the implementations by my most favorite JavaScript library (I would love to call it a Framework someday soon!) jQuery. There are tons of jQuery plugins that do this. All but one of them below uses address mangling technique in the form of page.aspx#5 to solve the problem. There are pros and cons for both the techniques as explicitly assigning mangled address like that helps in bookmarking. Whereas, if you don’t want to show the values you want to store in the history to the user, then hidden iframe technique below comes in handy:

jQuery BBQ: Back Button & Query Library

History/Remote – jQuery plugin solution for hijaxing links and enabling history

Restoring conventional page navigation to your javascript application with jQuery history plugin

jQuery History Plugin – Uses hidden iframe technique so that the address is not mangled with hash.

jQuery Address – Deep linking plugin – Supports Deep linking

History plugin

jHistory plugin

 

 

Advertisements

One response to this post.

  1. You’ve forgot jQuery History which my preferred choice! It can be found here: http://www.balupton.com/projects/jquery-history/
    It provides cross browser support for tracking hashchanges, so you can support those back and forward buttons again.

    There is also an Ajax extension for it called jQuery Ajaxy, allowing it to easily upgrade your webpage into a proper Ajax application without need for server side changes and remaining SEO and JS-Disabled friendly: http://www.balupton.com/projects/jquery-ajaxy/

    This is the solution chosen by such sites as http://wbhomes.com.au/ and http://www.balupton.com

    Overall they are both well documented, supported and feature rich.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: