A Better Ajax Back Button Solution

If you've spent any time coding an Ajax application you know that the one of the problems with Ajax is that it breaks the back button. You have probably seen solutions that use an iframe and a hash (#) in the url to fix this issue. While this works there is a much simpler way that I've been using in my applications for the last year or so.

The key is the A tag (also known as the anchor tag) and the name parameter with a hash in the url. The trick is to either dynamically create the element or to just change the value of the name parameter to the matching value of the hash.

Below is an example of changing the name of the anchor tag.

//Anchor Rename Object this could also be a simple function if preferred.
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorid){
	this.anchorid=anchorid; //This is the id of the anchor element
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholerid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorid){
		document.getElementById(anchorid).name = anchorname;
	}
};

In this example you would pass in the new value of the name (which must be the same value as after the hash in the url) and the id of the anchor element.

Below is an example of dynamically creating the tag and name values.

//Anchor Rename Object
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorholderid){
	this.anchorholerid=anchorholderid; //This is the id of the element to hold the new anchor
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholderid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorholderid){
		var AnchorCode=document.createElement("a");
	        AnchorCode.setAttribute("name", anchorname);
		document.getElementById(anchorholderid).appendChild(AnchorCode);	       
	}
};

In this example you would pass in the new value of the name (which again must be the same value as after the hash in the url) and the id of the anchor element.

Now the question that you may be asking is how does creating or renaming the anchor element help with fixing the back button. That is where when you call the object comes into play. You need to create or rename the object before a link is clicked. So, I would recommend using an onmouseover and an onfocus event to call the create or rename of the element so that before a link is clicked the required anchor element will be created.

I hope that this post has shown an easier solution to fix the back button problem that occurs when we create Ajax applications. Now go out there and try using it on your applications!

Update: I have posted a working example of this solution and it can be read here.

I am learning AJAX rite now and this tip may be useful to me at later stage. Thanks!

Glad to hear it Kss.

[...] A Better Ajax Back Button Solution by Ajaxonomy (tags: ajax) [...]

Or..you could use a wonderful framework called 'RSH' .... Really Simple History ...which provides you with a JS object that you initialize at the beginning of you page...and use it along with your Ajax requests. ... thy this out ... it takes you less than 30 mts to set it up and use it...

Thanks for the reply I'm going to check out Really Simple History and I'll write a little something about it if it looks good.

[...] A Better Ajax Back Button Solution by Ajaxonomy (tags: ajax javascript back browser button fix history programming url web webdev development) This entry was written by delicious and posted on 26 Novembre 2007 at 01:28 and filed under Del.icio.us. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. [...]

[...] A Better Ajax Back Button Solution by Ajaxonomy (tags: toread javascript back button ajax history) [...]

Hi, would you mind putting a full example of use,it's not clear for me.

Thanks in advance.
Congratulations for the web.

A full example would be appreciated, please...

This is a good idea, but I need more information. A lot of people are investing a time and money into a solution to this problem, and I am reluctant to think the answer is this simple. RSH, YUI, jQuery, and others are looking into a solution. How is this one better? What browsers (and versions) is it supported in? Thanks.

Hi Steven,

I'm working on a good code sample (taking out the code that is not needed for the back button fix from a project I made) and will be posting it later this week.

Hi,
could you please provide some more Information:
- Supported (modern) Browsers and Versions?
- How about the "Refresh Button"?
- How about adding Bookmarks?

And please, please a working example!

Thanks

I have posted the answers to your questions and a working example here

[...] Design After a post that I wrote a few months ago on A Better Ajax Back Button, I received many comments. Many of the comments have asked for more information on the post and a [...]

[...] 24. A Better Ajax Back Button Solution [...]

[...] A better Ajax back button solution - Here’s a workaround to issues pertaining to Ajax-loaded content breaking web browser controls and bookmarking capabilities. [...]

[...] 24.???AJAX Back Button Solution A Better Ajax Back Button demo [...]

[...] 24. A Better Ajax Back Button Solution [...]

[...] jQuery22.The Hows and Whys of Degradable Ajax23.Ajax?n yaratt??? gereksiz trafikden kurtulun24.Geri butonu25.Ekran [...]

[...] jQuery22.The Hows and Whys of Degradable Ajax23.Ajax?n yaratt??? gereksiz trafikden kurtulun24.Geri butonu25.Ekran [...]

[...] 24. Geri butonu: http://www.ajaxonomy.com/2007/web-design/a-better-ajax-back-button-solut... 25. Ekran okuyucular?: [...]

[...] 24. A Better Ajax Back Button Solution [...]

Hi,
We need a help in our project

If you go to giftgenius.com
1.if you click gifts tab, it will take you to gifts page.
2. if you click any check boxes in refine menu, which is on the leftside of the page. it will display gifts accordingly.
3. if you click any gift, it will take you to that gift page.
4. if you click the back button of the browser from there, you can come back to the gifts page and see the check boxes checked but the gifts that were refined is rearranged.

We have used ajax for displaying the gifts when refine menu is triggered. How to remember the setting in the page. Do we have any option in Ajax to remember the settings and reload the page without refreshing when back button is clicked.

[...] - Notes from Ruby on Rails Project Night saved by TeddyLu2008-11-18 - A Better Ajax Back Button Solution | Ajaxonomy saved by GMacqu2008-11-12 - Ajax and the Back Button (Ben Dillard) saved by map4082008-11-02 - Two [...]

Buenas, lo he probado y funciona a la perfeccion en firefox, pero en IE7 no va :(

Ah, hadn’t thought of that! I wonder how hard that would be to add…? We’ve got a thing coming up here soon about AJAX and accessibility so I might give it a go then.

[...] 24. A Better Ajax Back Button Solution [...]

Thanks for the snippet. I was looking to find out a good solution for the back button and found out your post:)

Very nice tutorial. I was looking for some Ajax stuff but i do not know coding so everytime i was messed up. Thanks alot it is working for me. :)

[...] A Better Ajax Back Button Solution [...]

good tutorial on ajax. thanks.

Why instead of messing with the javascript back button "feature" not just use cookies for the last page/url instead. You could as well save the referer in the url like facebook is doing it.

[...] 24. A Better Ajax Back Button Solution [...]

[...] hits the back button the iframe is navigated back which you can detect and then update your page. Here is another [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.