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).