A Better Ajax Back Button - Part2

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 working example.

In my previous post the code I used was done using JavaScript prototype objects. Because for some this is a bit more difficult to read I made this example as simple as possible to make it a bit easier to understand.

The below is the JavaScript portion of the code that is needed to accomplish the back button solution.

		function CheckForHash(){
			if(document.location.hash){
				var HashLocationName = document.location.hash;
				HashLocationName = HashLocationName.replace("#","");
				document.getElementById(HashLocationName).style.display='block';
				document.getElementById('Intructions').style.display='none';
				for(var a=0; a<5; a++){
					if(HashLocationName != ('Show' +(a+1))){
						document.getElementById('Show'+(a+1)).style.display='none';
					}
				}
			}else{
				document.getElementById('Intructions').style.display='block';
				for(var a=0; a<5; a++){
					document.getElementById('Show'+(a+1)).style.display='none';
				}
			}
		}
		function RenameAnchor(anchorid, anchorname){
			document.getElementById(anchorid).name = anchorname; //this renames the anchor
		}
		function RedirectLocation(anchorid, anchorname, HashName){
			RenameAnchor(anchorid, anchorname);
			document.location = HashName;
		}
		var HashCheckInterval = setInterval("CheckForHash()", 500);
		window.onload = CheckForHash;

In the above code you will notice that the function RedirectLocation calls the RenameAnchor function then sets the value of the hash (if you read the original article I go into more detail about what an anchor and hash are) in the URL. It is important that the RenameAnchor function is called before setting the hash value as it is important that an anchor with the same value as the hash exists before changing the value in order for the back button trick to work. The next important thing is that an interval is set to call the CheckForHash function (this interval could be whatever you want, but the smaller the number the more responsive the back button will be to the user) which checks the hash value and depending on the value will display a div (in your application you could have the function different, but I just wanted to keep it simple by showing and hiding div's).

Below is the HTML portion of the code.

	<a id='LocationAnchor' name=''></a>
	<div id='linkholder'>
		<a href='javascript:RedirectLocation("LocationAnchor", "Show1", "#Show1");'>Display Option 1</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show2", "#Show2");'>Display Option 2</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show3", "#Show3");'>Display Option 3</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show4", "#Show4");'>Display Option 4</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show5", "#Show5");'>Display Option 5</a>
	</div>
	<div id='Show1' style='display:none;'>
		1st Option
	</div>
	<div id='Show2' style='display:none;'>
		2nd Option
	</div>
	<div id='Show3' style='display:none;'>
		3rd Option
	</div>
	<div id='Show4' style='display:none;'>
		4th Option
	</div>
	<div id='Show5' style='display:none;'>
		5th Option
	</div>
	<div id='Intructions' style='display:block;'>
		Click on the above links to see different values, then use the back button to see your browsing history.
	</div>

In the above code there is an anchor tag that will be renamed in the JavaScript to trick the browser into thinking that the anchor exists. We then have all of the links set to call the RedirectLocation function in order to make sure that the hash and anchor values are set correctly. Finally there are a series of div tags that hold various content and will be displayed or hidden.

That is pretty much all there is to the example. You can view the sample here. Or you can download the code here.

I have tested the script without any issues on Firefox 2.0.0.13 and on Internet Explorer 7. It should work on Opera, Safari and earlier version of Internet Explorer and Firefox, but I have not had a chance to test on these browsers.

In my testing the code works with the back button, forward button and the refresh button. Plus pages where bookmarked correctly.

If you find a good use for this code I would love to hear about it (you can leave it in the comments or write a blog about it with your free Ajaxonomy account).

[...] I have posted a working example of this solution and it can be read here. ShareCloseSocial WebE-mail [...]

[...] A Better Ajax Back Button - Part2 By David Hurth 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 working example. In my previous post the code I used was done … Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]

[...] Miami - News wrote an interesting post today on A Better Ajax Back Button - Part2 | AjaxonomyHere’s a quick excerpt [...]

Sorry to say, but it does not seem to work in IE6 nor in Opera 9.2.
And link to the previous post is broken:
http://ajaxonomy.com/2007/javascript/a-better-ajax-back-button-solution

Thanks for the info, I'll work on making the example work on those browsers. Also, I have corrected the link in the past.

Thanks again.

do you have working fix for IE 6, or not yet ?
how do you think , it will be easy or hard to fix it in near future ?

Does not seem to work in ie 7 either? or am i missing something

[...] URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this [...]

It doesn't work for IE6 - ergo it is pointless for 80% of the ppl

[...] URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this [...]

The problem people are talking about in IE7 is because his code to find the hash changes isn't working. I haven't stepped through it to find out why. But I have recreated it myself and it works just fine in IE7.

The people who said it doesn't work in IE6 were correct. But if you use element.id instead of element.name then it does work in IE6.

I hope this helps everyone. :)

Hi I'm very bad with javascript.
How would you change the script ?

You wrote: "The people who said it doesn't work in IE6 were correct. But if you use element.id instead of element.name then it does work in IE6."

Can you provide the correct code that works for IE?

Thanks,

What is it mean dear? Can you say detail? It mean we will replace element.id and fix it into element.name? Is it right?

[...] URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this [...]

You can replace the "document.getElementById" and stuff like that with the equivalent of the js framework of your choice. Mine is Prototype, so I can replace them with $('id')

That will give a bit more compatibility between browsers.

Thanks for this great article!

Saludos,
Fede.

Does not seem to work in ie 7 either? or am i missing something

Hello...................

The example in "A Better Ajax Back Button - Part2" is not working in IE7.................Please provide solution for it.................it is working fine in Firefox......................

It doesn't work for IE6 - ergo it is pointless for 80% of the ppl

Hello
We had 3 chained drop down boxes on a jsp meaning if we select option from box1, box2 populates. i used ajax:select tag for that. then after selecting all three options user clicks on submit and goes to results page. then hit the back button then only the first option was populated with other two grayed out/empty. user is expecting to see all the three values that he selected. i am not sure whether it would be even possible to do that. please clarify.
Thanks

I implemented your code, but it seems a little ugly since every link is generally a call to the database to retrieve data, not simply showing and displaying div tags. Even when I change the setInterval value, no matter if I make it shorter I get flickering, or make it longer, it takes forever to display, this solution does not seem to be useful. To make it even more of a challenge, I overlay an animated gif while waiting for the data to be retrieved to display on the client. So every interval, this image gets displayed causing people to get frustrated while viewing the data. Basically, I only want the previous page to display ONLY when the person selects the back button, not on a set interval. And likewise for the next button. I tried putting a call to CheckForHash at the end of the RedirectLocation function, but it does not work, either. Maybe I implemented it wrong, but it seems to work ok if we don't mind it refreshing every interval. Please, can you suggest another way to accomplish the same end result of using the back button?

Thanks.

I spent about half of yesterday trying to work on my own solution for this, and ran into the same issue of IE not working. It DOES work in IE6 and IE7 when the anchors you're linking to are in the page, but obviously you don't want the page to jump around. I have some deadlines on some other stuff to meet now, but plan to get back to this ASAP. I'll be experimenting with creating the anchors on the fly and positioning them absolutely.

[...] URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this [...]

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.