Content with Style - Comments on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Content with Style - Comment #1 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Jun 2005 18:12:22 -0400

Fascinating article, Mike. Here’s a thought: if you allow the href=”#thing” to act as a link to a real anchor on the page (so use return true instead of return false) as well as a trigger for the scripting, then the latest version JAWS has a chance of working with your AJAX too.

So when you make a change to an area of the page you can link to that area and help guide (some) screen readers (indeed all modern browsers) to the new content.

Content with Style - Comment #2 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Jun 2005 18:40:30 -0400

Nice thought Richard.

Content with Style - Comment #3 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Jun 2005 18:46:46 -0400

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.

Content with Style - Comment #4 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Jun 2005 19:18:40 -0400

It isn’t exactly Ajax, but I’ve been considering doing this for S5 as well. You can already use fragment identifiers to go straight to a slide, but the address bar doesn’t change when you move through the slide show. It’s been an occasional request, and if I decide to do it, I’ll definitely look at your code to see how it should be done. Thanks!

Content with Style - Comment #5 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Jun 2005 19:36:57 -0400

Crikey, it’s the mighty Mr Meyer! You got me into this stuff in the first place… I think I might owe you a beer.

I reckon this could have uses outside of AJAX but that’s just what I happened to be talking about when I came up with the idea, and it stuck. I’d love to see people put this concept to use elsewhere! Flash seemed like the obvious one, since it’s asynchronous too, but your S5 app requires the decoupling of the default browser machinery as well, so this might be of some use.

Content with Style - Comment #6 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Jun 2005 05:28:39 -0400

Mike,

Thanks, I was in the process of researching all this stuff for my ajax apps. Prototype (Ajax framework built into RoR) needs this. I’ve been working on making prototype fail (ie regular links unless ajax is available) and will think of how to add this as well.

Content with Style - Comment #7 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Jun 2005 09:40:00 -0400

This breaks completely if you turn off Javascript.

Content with Style - Comment #8 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Jun 2005 10:29:00 -0400

Nice stuff. It looks like the code snippets here are wrong though… take the following code:

for(var i=0; i
var href = links[i].getAttribute(“href”);

There’s something missing there ;-)

Also, I don’t think it’s a good idea to pass on strings of JavaScript code to PageLocator. You’d rather write a little wrapper function to execute that code than starting up the JS parser by using `eval`.

And Jonathan, I don’t think the app itself will work without JavaScript, so that isn’t much of a problem.

Content with Style - Comment #9 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Jun 2005 10:46:31 -0400

Jonathan: Well duh! :rolleyes:

It’s an interesting technique, although I can’t help thinking there must be an easier way to do it.

Content with Style - Comment #10 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Jun 2005 10:51:23 -0400

Damn, I was just working on a demonstration javascript which does exactly that a few days ago to put on my website, but it isn’t finished yet. So you beat me to it, and that sucks!

Anyways, a few comments:
– It would be easier to use window.location.hash instead of window.location.href;
– Instead of loading actual pages with the iframe, you can use iframe.contentWindow.document.open, write and close to achieve the same effect;
– And if you use that instead, you can also let it send an event to the script element on load using onload=”” or so you don’t need the 100ms timeout.

I don’t really have time to look into it further now.

~Grauw

Content with Style - Comment #11 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Jun 2005 15:04:44 -0400

Jonathan: The AJAX-style functionality breaks but a fallback is provided – the links still go to the content.

Mark and Laurens: Thanks loads for your input. I’m neither a JS guru nor an AJAX one; I saw a problem and decided to try and solve it. I really appreciate the input of people who REALLY know the components here.

Laurens: Sorry mate!

Content with Style - Comment #12 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 01:38:32 -0400

First, for comment 7 (Jonathan) it breaks without js? Wasn’t AJAX all about js?
(you’re welcome Mike :)

The technique is cool , i have been looking into it and still might try my own solution for it someday, still digging into js stuff.
The one thing i didn’t like was the part that the # makes the page jump to the top again (at least at my first view on FF/Linux). Might be something to look into.

Other than that, great job.

Content with Style - Comment #13 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 01:59:59 -0400

I really like the way you have set up this article. How clear can you get writing up where it’s tested and where it works? By the way, I wouldn’t mind (and I’m sure Mike doesn’t either) feedback and improvements from other configurations than the tested ones. Thinking about the Opera version which supports XmlHttpRequest, is that out properly? I’ve lost track with Opera, which is a shame. Or any Linux variations. And please no weird hacked or specialized versions. The ones your mum / your client would use is fine. And a cake. And presents. I also wonder what the limitations on Safari are.
I think what Jonathan means, is that if you turn JS off, there is no css loaded with the content when you click on the links. But I think that’s due to the demo being a demo, or am I wrong?

Content with Style - Comment #14 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 02:38:00 -0400

Well, I can verify it all works perfectly with Firefox in Linux.

Content with Style - Comment #15 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 08:15:03 -0400

Thanks for the killer article man. I will definitely be integrating this into mp3act. I’ve been meaning to do that for awhile now and this is a great solution by the looks of it.

So thanks again, and nice site! It’s going into the RSS reader pronto.

Content with Style - Comment #16 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 14:21:30 -0400

Yay! Lovin’ the over use of the eval statement.

j00 r0x duD3!

Content with Style - Comment #17 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 14:54:38 -0400

oooooooooo…

eval() is evil!

DON’T USE IT EVER… IT’S A LAME SOLUTION!

Content with Style - Comment #18 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 15:09:21 -0400

Cool, well suggest an alternative and I’ll pop it in. Mark Wubben spotted the same thing. As I said earlier, I’m not a JS guru – my interest is user experience, so if you know a better way, I’m all ears.

Content with Style - Comment #19 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Jun 2005 15:29:10 -0400

@all the eval haters:
I don’t think eval used on the client side is a big issue, unlike the server side when input variables are evaluated. So I don’t agree with the statement that eval is a lame solution.
What's the worst thing that could happen? Since anyone can read the source and all the data is already passed to the browser it would be possible to execute anything through javascript:doWhatIWant(with.myObject) anyway ...
If you want to make the thing “secure” than check the propertyToUse against a list of allowed properties.

When we move to PHP code that’s a different story. In general you should always make sure that gets fed into a string which will be parsed by eval CANNOT contain anything malicious.

“Never trust any user input!”

Content with Style - Comment #20 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 18 Jun 2005 23:34:48 -0400

Well…besides precious time and client-side processor-load, ... what IS the worst thing that could happen?

Content with Style - Comment #21 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 19 Jun 2005 15:34:07 -0400

Eval isn’t the fastest thing since slicest bread, you might as well want to avoid it if that’s possible. Anyway, Mike, I already suggested a solution :) Here it is again, but with a code example:

this.locator = new PageLocator(function(){return window.location.href}, ”#”);

Inside PageLocator you simply execute the passed function, and you get the value.

Content with Style - Comment #22 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 20 Jun 2005 02:49:50 -0400

@Mark: good suggestion, and yeah, definetly eval isn’t the FASTEST thing, so yeah, avoid it if possible … But the script doesn’t loop-execute a thousand evals, so I just don’t see the massive impact the one single use of eval would have had … I just don’t see where eval is EVIL …

Content with Style - Comment #23 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 21 Jun 2005 17:25:08 -0400

Eval has some necessary uses, though it’s slow because the parser has to go over each eval line twice: once to evaluate the statement, and once to execute it. Not a huge problem for small scripts, but not the most elegant solution either. I use eval sometimes to escape function literals (var foo = function(){/* bar */};) because they cause syntax errors in some older (now ancient) browsers.

However, in your case, if you just need to evaluate a string as a variable name, why not use a string index of an associative array?

if(this.validProperties[propertyToUse]){
return this.validProperties[propertyToUse]
}

Content with Style - Comment #24 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 21 Jun 2005 18:38:51 -0400

Thanks for the snippet Mark – I really like that idea. I’ve been using the same method in some code I’ve been writing recently but I’d not made the connection back to this example. I would have made the changes the first time you posted but I’ve been incredibly busy…

Thanks also to James. I’ve always tried to avoid eval but it’s been so long that I’d actually forgotten why. The reason I used it here is because I couldn’t think of a way to make the wrapper flexible enough to monitor a variety of properties. I have a tendency to get hung up on code flexibility… There’s an interesting article on exactly that by Marcus Baker in PHP Architect from back in February.

Content with Style - Comment #25 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 21 Jun 2005 23:08:34 -0400

Good article Mike.

If only Opera could fix their document.location bugs already.

And yes, eval is evil. Any time you see it you should ask yourself why? The only valid reason to use it is to allow a user to enter code that you want to evaluate. In your case it seems what you want to pass as an argument is the location object (or as previously suggested a function returning the object in question).

Content with Style - Comment #26 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 23 Jun 2005 06:40:27 -0400

This is a very classy solution, I like it.

I wonder if someone could make a GMaps implementation where each drag results in a ‘reload’ to the same page, but with javascript that scoops up the request, contained entirely in the #clause, and re-find the location… ???

Content with Style - Comment #27 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 23 Jun 2005 17:53:25 -0400

Excelent Solution!!!

Content with Style - Comment #28 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 23 Jun 2005 20:41:14 -0400

Mike: That’s exactly what I’d like to see! The reason I did this in the first place was because Google Maps wasn’t easily bookmarkable… Maybe a Greasemonkey script?

Content with Style - Comment #29 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 28 Jun 2005 09:26:49 -0400

This demo (the download able) doesn’t work for me. The test.php is missing. Maybe I understood something wrong?

Content with Style - Comment #30 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 29 Jun 2005 02:22:39 -0400

Sorry about that Vert – don’t know when or why I removed test.php from the zip. It’s back in now so give it another go…

Content with Style - Comment #31 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 30 Jun 2005 09:16:37 -0400

I must be the only mac user to post. The script doesn’t seem to work on either Safari or IE5 for me.
In safari, the address bar does what it should do, and I can use the back button the way you intended it to be used. However, the content on the page does not revert to previous states when the back button is pressed.
On IE, the script works, but clicking on the side nav seems to dissacociate the page from it’s stylesheet,

Content with Style - Comment #32 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 30 Jun 2005 16:00:41 -0400

The script doesn’t work in iE/Mac – I’ve stopped developing for it as of this year. It’s usage for the sites I work on has dropped below the 1% threshold. When you click on the links you are taken to the static version of the content, generated server side, which I’ve not styled.

This did work on Safari 1.2 but I’ve not tried it on the newest release. Well, I say work… See the browser support table at the end of the article. Bookmarking worked but the back button remained broken. Maybe 1.3 has changed something…

Content with Style - Comment #33 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 02 Jul 2005 04:23:14 -0400

I say eval() is a necessary evil since Javascript has almost no support for reflection. (No way to dynamically call functions, dynamically assign variables, etc.)

Content with Style - Comment #34 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 08 Jul 2005 16:39:27 -0400

Good work Mike, this has been an issue of mine for the MP3 site – i’ll be in touch. Glad to also hear your thoughts on IE Mac – i’ve been trying to (unsucessfully) steer clients in that direction. Easy…

Content with Style - Comment #35 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 09 Jul 2005 06:55:50 -0400

I wrote my script mostly from scratch, but I got the concept from here, I think it’s a little simpler than yours, and may have a few better methods. chudosok.info 2.1
Any comments or suggestions?

Content with Style - Comment #36 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 16 Jul 2005 03:51:52 -0400

Hi. This leads me to wonder if the same solution can be used for solving similar problems for frames which more or less achieve the same thing if you are just using ajax for bringing in a navigation bar that doesn’t keep refreshing.

Content with Style - Comment #37 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 21 Jul 2005 09:11:22 -0400

In comment 7, Jonathan made an important point, this completely breaks if JS is turned off, the point is important because it does not have to break!

in the links pointing to content.php you can add a parameter to the url hash=n&nojs=true, in php if you see this parameter you also include the header and footer of the page, this way people who have js disabled will be loading content.php the old way AND getting the same page (with the black strips on top and bottom) , for people with JS enabled the href is rewritten using javascript (removing the nojs=true and using the # hack) and they will use ajax just like they are doing now!

I hope this was clear enough!

Content with Style - Comment #38 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 22 Jul 2005 02:10:09 -0400

I think I see what you mean Pat. As it is, if you turn off your JS, go to the demo and click the links they will still bring back your content, via a separate page that uses the same content-generating class server side but without any styling. I didn’t hook that page up to my CSS because my interest lay with the front end and the usability problem presented… It’s a separate page so there’s no need to pass in extra querystring params. To be honest, the server side bit isn’t very elegant but my main focus was the front end.

There are enough great suggestions here to warrant an upgrade to the article but I just haven’t had time to do it, although Nobody (35) may have beaten me to it anyway!

Content with Style - Comment #39 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 22 Jul 2005 21:56:24 -0400

If someone could tell me where I can find the Ajax part please do, but this has nothing todo with Ajax. Do not want to be offence, but this solution is a definite no go when utilizing xmlHttpRequest. Good for making ignorant people all excited but also only usefull if you can really set a history object with an iframe and totally not useless in a so called Ajax application.

There is no fix, and it is technically impossible within current browsers. The use of Ajax on the frontend is the only thing that is wrong. People use it in the wrong way.

Use it because you need it, not because it is cool.

Content with Style - Comment #40 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 23 Jul 2005 16:08:23 -0400

Mr. Schopman, I think you didn’t propperly take time understand the scope of this article. Mike is not coding an AJAX application here, but pointing out a possible solution for a common problem occurring with AJAX applications.
This has nothing to do with beeing cool but is an approach for all those who do use AJAX but find that the back button isn’t just a useless thing in the top corner of the browser.

Whether people that are actually building AJAX applications and maybe incorporating this solution into their AJAX application are ignorant this might be your point of view, but we don’t necessarily agree with you at that point.

However, the only useful points you really made are

a) You should use things because they make sense
b) You might not be able to use an iframe in your application, therefore the solution mike suggested could not be for you

To all other posters in here, please watch your tone, I don’t think it’s necessary to be as impolite as Mr Schopman. We are no big fans of editing user comments, but we are no big fans of a rude tone either

Content with Style - Comment #41 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 25 Jul 2005 17:00:10 -0400

Yep, as Pascal said, this article is less about AJAX itself and more about usability. If anyone needs a reality check on AJAX and its related technologies I highly recommend Marcus Baker’s article Listen kids, AJAX is not cool.

Content with Style - Comment #42 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 27 Jul 2005 18:38:26 -0400

When I go to the demo page, http://www.contentwithstyle.co.uk/resources/ajax-nav/#1, I get errors in a dialog saying only Only variables should be assigned by reference etc. in both IE and FireFox. Any ideas?

Content with Style - Comment #43 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 28 Jul 2005 18:26:26 -0400

Hi tester.

This is a problem with JPSpan and PHP 4.4. My hosting provider just upgraded from 4.x to 4.4, therefore the unexpected error.

We’ll fix that ASAP.

Content with Style - Comment #44 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 29 Jul 2005 00:59:25 -0400

Hi,

Thanks for writing fix for back button problem with AJAX.

Well, i am trying to fix this problem by utilising your code but I am not using JPSPAN function for AJAX. I am simply using XMLHTTP object and its function to make request to my server side php and getting html data ( i don’t need xml data).

I am not sure whether your fix will work for all the AJAX code. But i will appreciate if you change it to be compatible and generic for all AJAX. As of now, with your scripts I am totally confused to use what and where? Can you please write a small paragraph on how to plug this into any AJAX code. I am not JS expert nor I am AJAX expert.

And I do have real time monitoring system which uses ajax and in my page there are four frames which are requesting to server and loading data in real time.

Any help in this will be greatly appreciated.

Cheers!

Content with Style - Comment #45 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 29 Jul 2005 01:58:03 -0400

The bits of the code that call the back-end are ‘function doGetPage(i)’ and ‘var PageHolderHandler’. I’ve not looked into exactly how they’re hooked up to my PHP – I’ve let the magic of JPSpan take care of that for me. If your code is OO then I highly recommend JPSpan – it exposes your server-side methods to your client side code in a matter of minutes…

You say you have 4 frames… Do you mean frames, as in the HTML element? That might break my fix since I use an iFrame exploit to get the whole thing working in IE.

Content with Style - Comment #46 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 29 Jul 2005 19:17:09 -0400

Hi Mike,
Thanks for responding and informing me about the firing methods.

Well, I will try to use that into my code and see whether I can use it or not.

Yes, i do have 4 frames (html) element in my page and each of them is auto refreshing. Out of these one is hidden (triggering frame) and other three are data pulling frames from the server.

Well I am trying to support my application on FF first and if that works then 90% work done.

Thanks once again.

Cheers!
Dipesh

Content with Style - Comment #47 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 31 Jul 2005 04:07:42 -0400

If you want, Dipesh, you can look at the source code on chudosok It uses pure XMLHTTPRequest for getting back html.

Content with Style - Comment #48 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 31 Jul 2005 04:23:43 -0400

The problem with http://www.donotremove.co.uk/extra/ajax-nav/ is that you can’t open in new window in Internet Explorer and it won’t work at all in Opera. chudosok works in all except if you browse too fast in Opera. It’d be nice if you tried some of my code.

Content with Style - Comment #49 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 31 Jul 2005 04:25:43 -0400

One more thing, I don’t want to say I’m better, after all I did get the idea from you. Thanks.

Content with Style - Comment #50 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 01 Aug 2005 15:28:29 -0400

No offense taken! I look forward to examining your method when I’ve got a little more time…

Content with Style - Comment #51 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 01 Aug 2005 22:51:33 -0400

Hi Nobody,

Well i tried to go to your site to see the generic solution. Is your site in some different language, i can’t understand those language ? I went to the following site:

http://www.chudosok.info/21/

My problem is with the back button, i have already created real time monitoring system using AJAX.

Looking forward to hear from you.

Cheers!

Content with Style - Comment #52 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 02 Aug 2005 02:25:16 -0400

The site is in Russian, but the javascript isn’t, lol. The information on the website has nothing to do with ajax, but it loads the data via ajax and also supports the back button. I’m saying you can take the source if you like, sorry that’s it’s not commented though.

God Bless.

Content with Style - Comment #53 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 02 Aug 2005 03:43:04 -0400

Ok, I made a cut-down, half-English, commented version to make it easier on you.
http://www.chudosok.info/commented/

Content with Style - Comment #54 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 02 Aug 2005 10:58:36 -0400

Hi Mike

The code fix is good and would do the job for simple pages. The way I have written my ajax application is that it has a mvc pattern on the browser tier and performs view rendering on the client.
this should have been ” backable ” using ur style but the issue we face is with handling multiple views..
a user interaction triggers view updates in multiple views on the page. so a back button click or a bookmark operation would involve remembering the state of all the views.
any ideas on such a scenario..

Content with Style - Comment #55 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 02 Aug 2005 19:58:47 -0400

hi,

Thanks for replying and putting commented files on your site. Greatly appreciated.

It is still customized to your page, (it has all the elements which you have created in your html) and it is tailored like that. I am not JS expert, but as far as I could make out, following javascript functions must be related to page history :

1) chkURL() > This function you must be calling on load. Am i right ? This is so that it can check the URL and store it.

2) getPageN() > Get this page number from the history?

3) getPageName() > This is for your contact page thing?

4) getPage() > requesting this page and displaying it in the browser?

Well, the major problem which i see in using this is I am using 4 frames. There is no event based display of the pages, I am refreshing screen if something is happening at the back end and displaying it to the client. For this I have 4 frames in the page, which has different data and I am updating this data.

Does your solution still fits into my architecture?

Thanks once again for writing commented version of your code.

Regards,
Dipesh

Content with Style - Comment #56 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 03 Aug 2005 00:16:14 -0400

chkURL() is a like a timer loop that checks whether or not the url has changed, historywise or not. It is started up 100 milliseconds after load. The extra ie.htm and ie.js help Internet Explorer change the url when the back or forward button is clicked.

getPageN() is fired on url change, which checks if the url is valid, then tells getPage() which page to load and display.

getPageName() disects the url to get the name of the page. This is used for loading the needed page, for checking whether the url has changed, etc.

True,
function getPageName() is invloved in the history.
function chkURL() is one of the main functions involved in history, but also in navigating by links.

var lastURL stores the last url to check against when navigating.

ie.js and ie.htm which are included in this manner:

and fired at startup like:

Content with Style - Comment #57 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 03 Aug 2005 00:21:45 -0400

oops, part of my post got cut off because of the tag stuff

chkURL() is a like a timer loop that checks whether or not the url has changed, historywise or not. It is started up 100 milliseconds after load. The extra ie.htm and ie.js help Internet Explorer change the url when the back or forward button is clicked.

getPageN() is fired on url change, which checks if the url is valid, then tells getPage() which page to load and display.

getPageName() disects the url to get the name of the page. This is used for loading the needed page, for checking whether the url has changed, etc.

True,
function getPageName() is invloved in the history.
function chkURL() is one of the main functions involved in history, but also in navigating by links.

var lastURL stores the last url to check against when navigating.

ie.js and ie.htm which are included in this manner:
{!—[if IE]}
{script type=”text/javascript” src=”ie.js”}{/script}
{![endif]—}
and fired at startup like:
{body onload=”try{if(ieLoader){ieLoader();}}catch(e){}...

just replace {} with the the tag thingies

are required for it to function in Internet Explorer and are only for history, so all the functions there are for history.

I think what you’re doing is similar to how gmail auto-updates the user’s inbox. If you need people to navigate back in your app, this wil work. All you need is to have people navigate by page.htm#wheretogo and have the chkURL() fire a function to deal with the wheretogo when it changes.

And you’re welcome.

Content with Style - Comment #58 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 29 Aug 2005 09:06:08 -0400

doesnt’ works for opera 8 browser :/

Content with Style - Comment #59 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 30 Aug 2005 18:29:36 -0400

>doesnt’ works for opera 8 browser :/

Mine or Mike’s?

Content with Style - Comment #60 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 28 Sep 2005 20:22:32 -0400

—> doesn’t work if you turn Javascript off

so when are people going to stop saying this about AJAX stuff? You know Async JAVASCRIPT and XML?

We know that AJAX stuff doesn’t work if Javascript is turned off. WE KNOW.

If Javascript isn’t turned off then we don’t need to worry about bookmarking where we are in an AJAX app do we?

Sorry…just tired of seeing that comment EVERYWHERE.

Content with Style - Comment #61 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 20 Oct 2005 05:20:56 -0400

“What can be changed in the URL that won’t trigger a page reload? The hash portion.”

Brilliantly simple. Genius, even. Thanks for the great article!

Content with Style - Comment #62 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 23 Oct 2005 20:25:30 -0400

@Nobody – Could you please show the code for the /commented/data.php file.

Content with Style - Comment #63 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Oct 2005 04:50:25 -0400

Mike:

The error:

[Server+Error][2000] Only variables should be assigned by reference
Method called: pageholder.as html()

still exists, even though it was committed to being fixed back in July (ref. comments 42 and 43).

I would really be interested in looking at this as I have an urgent need for some reasonably way of handling the back button issue, even if it’s not perfect.

Any chance this can be addressed in the very near future?
– Thanks!

Jim

Content with Style - Comment #64 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Oct 2005 06:41:46 -0400

It actually was fixed! That error is due to some changes in PHP4.40 that have affected the version of JPSPAN that I’m using. I moved the demo to my webhost that until this week was running on PHP4.3 but it looks like they’ve now upgraded. I’ll fix it AGAIN. Sorry for any delay Jim.

Content with Style - Comment #65 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Oct 2005 08:42:24 -0400

Right, I’ve moved the demo to my dev server so it’s up and running again, this time under PHP5. There is a bug report on the JPSPAN sourceforge page about the PHP4.4.0 problem but nothing’s been done about it yet. I guess Harry’s busy…

Content with Style - Comment #66 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Oct 2005 13:32:27 -0400

Mike:

Thank you!

I have scoured the web and yours seems the most viable solution.

Those of us serious about using modern technologies in our dynamically generated web apps must have a reliable way of dealing with the legacy issues that will always be with us – those left over from the days when all web pages were static.

I am most anxious to view/study your solution.

Thanks, again.

Jim

Content with Style - Comment #67 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Oct 2005 22:07:44 -0400

Mike:

Can you share what the PHP 4.4.0 fix is?

Thank you.

(You’re right about Harry. Haven’t seen him any of the usual places for a very long time.)

Jim

Content with Style - Comment #68 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 28 Oct 2005 08:41:01 -0400

Jim, if you look up the comments a bit you’ll see a link from a chap calling himself ‘Nobody’ to an implementation he’s come up with. He says it’s simpler than mine but I just haven’t had the time to dissect it myself. Might be worth a look if you’re starting from scratch though…

From what I can gather the good folk behind PHP have decided to tighten up their pass-by-reference handling and creating new objects. I don’t know the ins and outs of it to be honest. I had several days of listening to Marcus complain about the changes he was having to make to SimpleTest but that’s about my lot! There’s a decent explanation on SitePoint though: PHP 4.4 Minor Gotcha. Hope that helps…

Content with Style - Comment #69 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 28 Oct 2005 17:36:41 -0400

Mike:

Interesting reading. Thanks for the link.
– Thanks!

Content with Style - Comment #70 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 29 Oct 2005 17:52:16 -0400

> Could you please show the code for the /commented/data.php file.

Sorry, I’ve been gone for ages, here’s the content in data.php: http://www.chudosok.info/commented/data_php.txt

Content with Style - Comment #71 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 21 Nov 2005 11:54:50 -0500

This method works okey for me, but when i try to include something more than a plain text in ‘pageholder.class.php’ gives me problems.

I can’t include into this class complete pages becoming of every directory. Do everybody know how to fix this problem?

Content with Style - Comment #72 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 30 Nov 2005 16:43:57 -0500

Thanks for this. I will have to adapt this to my AJAX app . At this time I only have one link that allows outside linking. I don’t know if I will implement the support for non javascript seeing as without it my app is no good anyway.

Content with Style - Comment #73 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 02 Dec 2005 06:52:24 -0500

Hi, nice article. I just want you to now there is this really_simple_history_framework that I use and seems to be working pretty cool. http://codinginparadise.org/projects/dhtml_history/README.html
I think the approach is the same as what you do, but you mught find it interesting to check out.

kind regards.

Content with Style - Comment #74 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 05 Dec 2005 09:38:25 -0500

The bookmarking system described here works only for javascript-enabled browser. If you follow the #-kind-of-link in the browser without javascript, the result will be weird.

Is there a way to get access to the hash portion of the url from server? If it’s possible we could fix the problem…

Content with Style - Comment #75 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 05 Dec 2005 19:19:06 -0500

Is this method also applicable for DOM scripts eg a toggle which relies on #hash links that show/hide a div container.The hashlinks which toggle the on/off state are not visible in the actual addressbar either.

Content with Style - Comment #76 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 07 Dec 2005 13:21:17 -0500

I’m using js link a bit differently

[a href=”some.link” onclick=”goUrl(‘some.link’);return false;”]Some Link[/a]

In this way there is a fallback/failover suport if js is disabled.

My problems are
1. back button
2. bookmarking current page

How do you suggest to address this case ? Do you thing I can adjust your solution to my problem ?

Thanks,
MC
www.goodstockimages.com

Ps.
BTW I’m using AjaxAnywhere http://ajaxanywhere.sourceforge.net/

Content with Style - Comment #77 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 11 Dec 2005 06:33:16 -0500

wow… amazing… I’ve looking for this and now… I understand it… thanks.

just a brazilian newbie.

Content with Style - Comment #78 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 14 Dec 2005 23:12:47 -0500

@MC

Just make you js link do “window.location.href = ’#lalala’;”

So, it will still do the navigating thing.

Content with Style - Comment #79 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 21 Dec 2005 08:21:55 -0500

I want to develop a search results page, in which i want to display the results depends on price. I want to use one slider which contains the price range. when the user drag this slider, i have to display the results in this price range only.

Content with Style - Comment #80 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 22 Dec 2005 17:26:33 -0500

FYI – There has been a really nice implementation of this approach by a big company. Yahoo! has done this well with their new maps beta. The maps (using flash) are very dynamic but the url always remains accurate and “cut and pasteable” via use of the hash.

Content with Style - Comment #81 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 29 Dec 2005 03:49:17 -0500

A bit off topic, but I’m developing a file manager which has file searches which get posted from a form. I then use window.location.href or window.location.hash to write the search string to the URL. This works fine, except in Safari, where the page goes into a permanent ‘Loading’ state. Any ideas?

Content with Style - Comment #82 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 29 Dec 2005 08:39:21 -0500

Man I LOVE YOU !!! Thanks for the this great article !

Content with Style - Comment #83 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 09 Jan 2006 17:06:16 -0500

This solution is right but still not 100% because in IE it doesnt let you change the hash programmaticly .

check erik.eae.net/playground/hashlistener.zip for the solution

Content with Style - Comment #84 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 16 Jan 2006 02:57:06 -0500

Hi,
I’m the admin of the opensource project “thephpbible.sourceforge.net”
thephpbible allows webdesigners to quickly and easily integrate a simple Bible into their church or organizations web site.
We need someone to add this functionality to our project.
If anyone is interested contact me (bywave AT gmail.com)

Thanks

Content with Style - Comment #85 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 27 Jan 2006 12:08:14 -0500

hey there tastatureschmutzer

excellent work. i got yours working on firefox on mac with ease. how do you get it working on a pc running internet explorer.

great stuff.

Content with Style - Comment #86 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 29 Jan 2006 06:25:02 -0500

Hey mate,
this works great!
I modified it a bit in order to make normal anchors work as well and it worked out perfect.

I tried it in netscape 7.1 as well just for checking compatibility and unfourtunatley it does NOT work there…though netscape is mozilla based. Very strange.

Maybe u can work this out.

Cheers, Florian

Content with Style - Comment #87 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 29 Jan 2006 07:28:51 -0500

Hi can some1 please help me, I tried to log into an account of mine but this keeps coming up: “you have been log out of your account as the use of the browser back button is not supported”. This just suddenly happened and I’ve no idea how to fix it. Please help!!!!!!!!!!!!

Content with Style - Comment #88 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 06 Feb 2006 17:25:38 -0500

Has anyone got this working with flash yet? we flash guys really need these basic browser functions

Content with Style - Comment #89 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 06 Feb 2006 21:24:49 -0500

This has been done with Flash before, but this article is specifically about doing it with the XMLHttpRequest object.

Content with Style - Comment #90 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 07 Feb 2006 06:47:47 -0500

It already is possible in Flash – that’s where I got the basic technique from! For an example of it in action see the Holler site…

Content with Style - Comment #91 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 07 Feb 2006 18:55:08 -0500

The Holler site only seems to address the back button issue in Flash, though, not bookmarking. Robert Penner’s solution also doesn’t support bookmarking (unless I’m missing something). Perhaps it would be worthwhile to change the “The original bookmark/back button fix, as used by Flash developers for a little while now” phrase in the article to only mention the back button? Sorry if I’m wrong about any of this.

Thanks.

Content with Style - Comment #92 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 08 Feb 2006 05:16:36 -0500

You might want to have a look at the source of the track attack website, it’s a flash site with working back button and the possibility to bookmark a page, and it’s developed in a similar way to Mike’s approach.

Content with Style - Comment #93 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 08 Feb 2006 12:02:57 -0500

Thanks very much, Matthias, I really appreciate it.

Content with Style - Comment #94 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 11 Feb 2006 05:27:34 -0500

With a address like http://foo.bar/#foo/bar/ , readability is improved a lot. Compare this with a google map address :-)

Content with Style - Comment #95 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Feb 2006 10:44:19 -0500

So how do you get this to work without JSpan and PHP, like if you for example use ASP.Net like me??

What does doGetPage do??

Why don’t you update the script with the suggestions, suggested amongst other by Mark?

Content with Style - Comment #96 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 15 Feb 2006 12:22:49 -0500

Henrik:

How you hook up your Ajax to your back-end technology isn’t the point of this article – that’s why I used an out-of-the-box solution like JPSpan to deal with that aspect for me. Here I am only concerned with how you trick the browsers into adding to their history and proposing a way to get bookmarking working. This method actually isn’t limited to Ajax either – Matthias has got it working for Flash and it would work fine with Eric’s S5 too.

doGetPage is the function that gets content from the server side. If you were doing this for yourself that is the function that you would have to change. pageholder is a PHP class on the sever side whose method ashtml returns a string of HTML. It’s not documented in the article because, as I said before, the transfer method is irrelevant. It’s all in the zip file though if you want to take a proper look for yourself…

I’ve not updated the script for the same reason I’ve not written any new articles recently: time! I’ve just got too much work on to spend much more time on this, which is done completely for free. When I get time I’ll do some kind of redux but until then I would highly recommend checking out Nobody’s comments above – he’s come up with another method for doing the same thing, based on this one, and Robert Nyman’s AJAX Source Kit, which looks really good.

Content with Style - Comment #97 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 17 Feb 2006 00:19:37 -0500

i am looking for smaller companies in united kingdom and USA, that are using this web application called AJAX, were do i find these companies

Content with Style - Comment #98 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 22 Feb 2006 03:17:56 -0500

Hello Mike and thank you for your answer. I definately know what it’s like not to have time, and I guess in the end it comes down to my own ability to do tricks with javascript, whether I get it to work as I intend to or not.

I think my basic problem was that I didn’t really see what type of data that function returned, and it didn’t say it was a transfer function. Thanks for the explaination.

I’ll have a look at “Nobody”’s comments above, and I have already had a look at Robert’s Ajax implementation – it look really great, and I’m sure I’ll have a look at it when I get through the exams :p.

Content with Style - Comment #99 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 02 Mar 2006 06:49:34 -0500

I am using Brad Neubergs solution for retaining the back-button functionality, and it works very well.

There is, however, one thing I do not like (but seems to be IE’s standard behaviour): the selection box on the back- and forward buttons (for freely selecting any visited page instaed of going just back and forth) always show the full page URI (which is usally so long, it is meaningless, as you only see the server address), where I would only like to see the visited pages title.

And to my great delight, your demo app does just that: it displays the entry “Dummy Page” there!

How did you achieve that????

Content with Style - Comment #100 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 02 Mar 2006 20:08:09 -0500

Great article!

As far as I understand this, together with at lot of good comments from others, such as “Nobody” , may solve my problem. It’s great that you people are willing to share good ideas with others!

I may not use your script, but the idea itself was what I needed.

My users, wich are puples and theachers in Norwegian shools, love the AJAX-solution but miss bookmarking and the buttons. Dealing with that kind of users we really need to take care of this issue. Your solution just gave me hope :)

My only concern is that this idea triggered me and probably will keep me awake the rest of the night ;)

Hopefully the browser vendors will give us some solutions, but that may take some time.

Thank you for taking the time to write the script and the article!

Winifred:

I guess the reason why you see long URL’s in IE’s selection box is that you have ben browsing pages whitout a proper title. In my selction boxes I see readable titles when I have been visiting pages with titles…

Content with Style - Comment #101 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sat, 11 Mar 2006 00:27:40 -0500

Hey guys!

First of all, thanks a lot for a really useful article, Mike. It gave me exactly the help I was looking for. I’ve been implementing your methods in a new website I’m working on for Persnickety Tim’s Coffee, but I’ve got this freakish behaviour going on in IE version 6 on the PC, and I can’t for the life of me figure it out.

You can see what I’m talking about at http://test.ptims.com (just open it with IE). The only AJAX-enabled buttons right now are the Buy Coffee links and the Gift Baskets link. Click around between those pages, maybe use the back button once and then click the buttons a couple more times—first of all, you’ll see that the window title changes, while the only thing Javascript is changing is the window.location property (I’ve also tried window.location.href and window.location.hash). Second and more importantly, IE goes to a blank page and the top left icon (above the File menu) changes as well.

I’ve been scratching my head for a week on this one. If I comment out the line that changes window.location (or .hash or .href), things work great—the back button included. But once I try to change window.location, it freaks out. I’ve tried changing window.location after the iframe src change, before it, I’ve even had window.location change a couple seconds before changing the iframe src—the error keeps coming up.

I’m on the verge of foregoing the bookmark functionality, but I thought I’d see if any of you great minds are up for a challenge. I’ll be grateful for any help. Thanks!

Content with Style - Comment #102 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 06 Apr 2006 21:49:30 -0400

Hey folks ..

i’ve a problem .. stuck in the deep end with php and can’t find a life-jacket ;P

i’m trying to serve a php page with ‘pageholder.class.php’ .. but can seem to locate a suitable cmd to insert the page into the div ..

i’ve tryed a ‘echo “document.mosteverything(myphp.php)” ’

but no avail ..

also thought a ‘document.write’ with a ‘include_once’ served in php might do .. but alas no ..

fast trying to learn js an php so any helps would be most appriciated :)

ta

bren

p.s : i’m sure this is going to be a duh wheres my brain gone but deadlines do strange things to a mans minds ..

Content with Style - Comment #103 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 09 Apr 2006 12:48:02 -0400

Great work, great article, thanks to share all this code!
i’ll try to learn from it, my website is in need of a liftup :)

Content with Style - Comment #104 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 18 Apr 2006 00:00:21 -0400

Dont make it with JPSpan. I am newbie and I donnot understand!

Please!!!

Content with Style - Comment #105 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 18 Apr 2006 12:39:21 -0400

David: Sorry if you don’t understand but this article isn’t really about Ajax, which is why I used JPSpan – to take that aspect out of the equation. The point here is the javascript to fix the back button and enable bookmarking.

There are far better people than me out there writing about implementing your own Ajax apps…

Content with Style - Comment #106 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 18 Apr 2006 16:37:40 -0400

I know I am a little late to this discussion. I have been following it but never commented on it.

My approach so far has been to use a bootstrap page of some sort (pick your flavor of server side language)

ALL requests are routed through the bootstrap page using your favorite rewrite engine. (mod rewrite in my case) The page then parses out the path in the address bar and stores the values.

Each controller knows that if is invoked with params that are passed AFTER a # that the request is “ajaxy” and behaves as appropriate. If the url doesn’t have a hash the backend composes a page and returns it.

The js on the front simply doesn’t fire if it isn’t fully supported. Once it fires it finds all link elements that allow ajax style updates of content (via class, id, rel, rev, hash tables of ajax listeners .. doesn’t matter ) and replaces their real url with the same exact string preceded by a #.

Without ajax support the links are real url://domain.com/foo/bar style links. With ajax support they are url://domain/#foo/bar style links.

It is all proof of concept code so far. But if I get it working more nicely I will of course share.

Sorry if this is off topic. I started to ramble.

Content with Style - Comment #107 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 02 May 2006 13:10:49 -0400

Your demo doesn’t work in Opera at all (links are unclickable), but it looks nice in Firefox.

Content with Style - Comment #108 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 11 May 2006 16:34:14 -0400

I actually read the article and didn’t find it very helpful, so I wrote my own back button AJAX fix with PHP.

It is available here

It is simpler to use. Assuming you have PHP setup, you can just pop it onto your webserver and see it work.

It has a noframes fix, so that if someone chooses not to use frames, the site will still work, even if the frames don’t fix the back button.

The example I wrote has code highlighting so it is easier to read as well. The main advantage my example is you can just read the code and see how it all works.

Content with Style - Comment #109 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 30 May 2006 02:11:47 -0400

Your demo worked fine in Opera and IE7. Great work, and excellent article. In my opinion the most important browsers :)

Content with Style - Comment #110 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 09 Jun 2006 02:59:17 -0400

hi all
a very good article but can anyone suggest some basic article if we not use php but wish such back and bookmarking facility in iframe
Thanks & Regards
saurabh

Content with Style - Comment #111 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 14 Jun 2006 15:58:50 -0400

Great article! Helped me out tremendously. I used it to create a much simplified version for Flash.

StoneArch – Page 1

var currentUrl = “”;
var intervalId = 0;

// Start the timer and read the initial Url
function init() {
currentUrl = window.location.href;
intervalId = window.setInterval(checkForUrlChanges, 10);
}

// Add to the history
function addBookmark(page, title) {
document.title = title;
currentUrl = “mockpage.html?id=” + page;
window.frames[“mockPage”].location.href = currentUrl;
}

// Check for changes in the Url, if they occur update the Flash movie
function checkForUrlChanges() {
if (currentUrl != window.frames[“mockPage”].location.href) {
currentUrl = window.frames[“mockPage”].location.href;
var items = window.frames[“mockPage”].location.search.split(”=”);
thisMovie(“AnchorTest”).gotoBookmark(items¹);
}
}

// Find the Flash movie
function thisMovie(movieName) {
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}

Content with Style - Comment #112 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 14 Jun 2006 17:45:28 -0400

I’ve been struggling with the back button issue for over a week now and I’m not any closer to a solution. The site I am building is still at it’s early stages and I haven’t yet added even support for non-IE browsers. I do not know anything about PHP and I can’t tell if I can even implement the solutions discussed here since I already came up with my own bookamrking scheme and I’m using frames besides. If anyone has any suggestions, please let me know. I can post any code that people would want to see or even allow anonymous read access to the folder that contains all of my current source.

Content with Style - Comment #113 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 28 Jun 2006 17:04:41 -0400

So many comments! I’m very pleased to see that you tend to this article and respond to the comments Mike. Kudos! Between your solution, and the information you’ve provided about it, the comments, the answers, and the alternate solutions proposed, including Nobody’s, I’m sure I’ll be able to put together a portable collection with this functionality to fix the apps that I’ve written. I’ve been meaning to consider back buttons and bookmarking, but it wasn’t until today when my girlfriend pointed out those exact issues with my new photo search that I realized it’s time to take them seriously!

I know this isn’t the place for advertising AJAX apps, but I’ve gotten into writing them recently, and I’m pretty excited about my photo search app: www.jcbeck.com/photos/javascript.asp
This is the “beta” url, which shall remain here, but I may put this “live” at some point either at this url or another. Thanks for those who stop by!

Content with Style - Comment #114 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Jul 2006 09:59:32 -0400

Content with Style - Comment #115 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 01 Aug 2006 21:32:37 -0400

Sweet! I was just looking for something like this—came here via google. That’s pretty sweet, man. I can’t wait to adapt it for my stupid project…

Content with Style - Comment #116 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 04 Aug 2006 16:47:48 -0400

>I say eval() is a necessary evil since Javascript >has almost no support for reflection. (No way to >dynamically call functions, dynamically assign >variables, etc.)

Wow…

x? y() : z();
x = y || z;
x();

x = a? y : z;
x = x || y;
if(x) var y = z; else var y = b;

I thought that was all quite easy.

Content with Style - Comment #117 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 13 Aug 2006 22:04:04 -0400

Hi Nobody,

First and foremost, thank you for the script, people like you are life savers for people like me. But i need your help.

I have setup your pages on my server, but it seems the back button doesn’t work proplery. Can you please guide me.
[link] http://www.webhostingfx.com/gtek/newajaxnav/test.htm

This is what happens:
When i click the back button it goes to
http://www.webhostingfx.com/21/#home

How can i change this?

Thanks a lot
desperado

Content with Style - Comment #118 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 13 Aug 2006 22:41:13 -0400

Hi Nobody,

i think i just figured it out.

It’s in ie.js, the function chkHrf()

i changed window.location.href = ”/21/#” + nhrf; to
window.location.href = ”./test.htm/#” + nhrf;

Let me know if i am on the right path, coz that works just fine. Thought i should put it in here so that others can use it as well…

Please let me know if i have to make any changes anywhere else. For a working demo, have a look at
http://www.webhostingfx.com/gtek/newajaxnav/test.htm

Cheers,

Content with Style - Comment #119 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 29 Aug 2006 10:06:05 -0400

Hello,

FYI:

The demo provided does not work on IE6 WinXP SP2 (IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519)

but this one provided by nobody does.

Content with Style - Comment #120 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 29 Aug 2006 10:23:04 -0400

It works fine for me in IE6/XPsp2…

Content with Style - Comment #121 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 10 Sep 2006 14:33:54 -0400

Hi,

Has anyone noticed that using the rshf in IE you see a loading bar in the status bar when navigating the o’reilly mail example (
http://shrinkster.com/i51 ). This seems to go against the ajax concept of not seeing any page refresh/loading?

Any thoughts appreciated.

Thanks
Kieran

Content with Style - Comment #122 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 13 Sep 2006 11:23:17 -0400

Hi, I have been following this article and responses for a few months. Although I feel that the solution you present is nothing short of brilliant, I have some reservations regarding Google and SEO. Will Google uniquely crawl and add to its banks urls of the type generated here? i.e. does Google see url#bob and url#mary as two unique links with unique content? Any comments would be highly appreciated.

Content with Style - Comment #123 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 13 Sep 2006 11:34:21 -0400

Peter: This approach is unobtrusive so your links should all be in the standard server-side form with normal querystrings – something like /yourpage.php?id=4. At runtime the DOM script then runs through and hijacks them, turning them into /yourpage.php#id=4. Google will see the ? ones while the user interacts with the # versions. Does that make sense?

Content with Style - Comment #124 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 14 Sep 2006 09:19:02 -0400

Hi Mike – don’t post this – just responding to your response re SEO and Google: I feel like a righteous ass – my brain bypassed that section of the article completely. How weird… I’m a bit freaked out ;-) Anyway, you make total sense. Thanks again for a truly brilliant solution. I’ll send you a link to my site once it’s done so you can see another implementation in action. Best wishes. Peter.

Content with Style - Comment #125 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 04 Oct 2006 05:42:56 -0400

The demo works fine in Firefox 1.0, but try this in Firefox 1.5 (PC or Mac):

1) Open the demo
2) Click on page 2
3) Open any page outside of the demo (e.g. Google)
4) Click the back button

The hash should say #2 and page 2, but instead it’s page 1 and no hash. It actually goes back to the hash value (or lack thereof) when the page was first opened. If you try this test by going to page 3 directly first (with #3) in step 1, at step 4 it’ll be page 3 again.

It appears to only be a “cosmetic” bug; the value in location.hash is wrong, but if you click reload or go back then forward again, the right page/hash shows up. My theory is that this is caused by the page being still in the session history / fastback cache (new with 1.5), but I haven’t turned it off to test it completely. (If after step 3 you visit more than 8 pages then go back to the demo in step 4, which should flush the demo out of the cache, the right page/hash appears).

Has anyone seen the same behaviour before? Any workaround or information (even a bugilla report)?

Content with Style - Comment #126 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 10 Oct 2006 14:09:02 -0400

Hello,
your abstract is really good and above all very easy to understand (even for me with only litte js-knowledge).

My aim is it to add the following way of opening the adress: index.php#hash=site1 instead of the id: index.php#hash=1
This is particularly important for me (administrating the side, therefore i do not need to know all the numbers).
Do you have an idea, how to implement this very easy?

Today, i’ve prepared the pageholding.class to load the sites out of a mysql-db. It’s so easy now to adminstrate my site :). Thank you!!!

Content with Style - Comment #127 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 13 Oct 2006 10:25:09 -0400

This works in Safari 2

Content with Style - Comment #128 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 30 Oct 2006 08:57:02 -0500

:)
this article is really commented!!!!
very nice….
the example, the comments, the community….
the point is…
i wonder
can browser applications written in ajax and some server side script replace the standalone applications made in vb or c#
thanx

Content with Style - Comment #129 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 09 Nov 2006 19:31:48 -0500

I think both Mike’s and my solution needs a rewrite. Both seem to be incompatible with the latest Firefox and Opera.

Content with Style - Comment #130 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 13 Nov 2006 16:30:02 -0500

Regarding Safari, bookmarking does work, the back button doesn’t. The back button is fixed in the Safari nightly builds, so the fix will show up in a future version of Safari.

Content with Style - Comment #131 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 14 Nov 2006 23:04:51 -0500

As people have noted already, the example doesn’t work at all in Opera (v9.02/Win for me). Can’t open the three pages and the back button is seriously broken.

@Matthias Willerich – Opera added XmlHttpRequest in v8.0 (http://www.opera.com/docs/changelogs/windows/800/) so yes it’s now in the major release. Initial support wasn’t perfect but seems far more robust in 9.

Content with Style - Comment #132 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 17 Dec 2006 04:47:07 -0500

Nice code, i will try to implement in my website. But your demo page does not work at all in Opera.

Content with Style - Comment #133 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 19 Dec 2006 18:01:23 -0500

Here’s the fix for Opera.

http://www.quirksmode.org/bugreports/archives/2004/11/load_and_unload.html
(comment 15)
http://bloomd.home.mchsi.com/opera-onload.html

Tested in Opera 9.

Content with Style - Comment #134 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 20 Dec 2006 14:30:16 -0500

Did anyone notice that IE DOES in fact create a new history entry if the # part of the URL is changed to an anchor tag that actually exists? One solution to the IE problem (as opposed to the hidden IFRAME) is to have a container div that you inject an anchor tag into just before changing location.hash. Here’s an example:

Content with Style - Comment #135 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 09 Jan 2007 09:04:58 -0500

@Ben:

I noticed that too. I used it to my favour by setting the value of “document.documentElement.id” to whatever my URL fragment was going to be in the same same function as the one that changes window.location – that way there is no need to create any extra markup to handle this in IE. For example:

function UpdateAddressBar(address) {
document.documentElement.id = address;
window.location.href = ”#” + address
}

Is what I used to get around this issue, where ‘address’ is the URL fragment identified in another part of my script.

Content with Style - Comment #136 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 12 Feb 2007 19:44:36 -0500

I fixed my script, and even though it is still a lottle bit messy, it works in all the latest versions (IE 6 and 7, FFx 2, O 9) of the current browsers. http://chudosok.info

Content with Style - Comment #137 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 19 Feb 2007 00:39:22 -0500

This is all well and good but because search engine crawlers don’t execute JavaScript they will never see the correct page accessed with a # url. So this approach is not SEO friendly.

Content with Style - Comment #138 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 19 Feb 2007 06:26:33 -0500

@Matt: Look in the source. There aren’t any href=”#” attributes – all the links work without JS. That’s the point.

Content with Style - Comment #139 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 21 Feb 2007 03:09:29 -0500

This is really more of a experiment/proof-of-concept kind of thing. I believe that neither Mike nor me meant this to be used as a main means of navigation for a serious website (this one doesn’t use it, for example). We basically reinvented the wheel with Javascript here, that’s all. We proved it can be done.

Content with Style - Comment #140 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 21 Feb 2007 03:20:47 -0500

ak, sorry, forgot to address my previous comment to Matt. A little crarification as well: the site navigation thing is the experiment/proof-of-concept. The actual code and technology utulized here is useful for AJAX apps that don’t need a search engine or anything but that would need to save the state of an app in the back/forward buffers and into bookmarks, such as Google Maps.

Content with Style - Comment #141 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 22 Feb 2007 12:49:40 -0500

@Nobody: I think Matt’s missed that the script works unobtrusively so there actually aren’t any href=”#” in the HTML… Still, I agree with you as well – it’s probably not a good idea to use Ajax as the primary means of navigation!

Content with Style - Comment #142 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 20 Mar 2007 02:31:48 -0400

Recently implemented a solution that was originally based on Brad Neuberg’s code but now has the advantages of having been cleaned up a bit and, best of all, no longer requires a separate iframe. This means that IE will not hit the webserver with a request every time the back button is clicked. The code can be found here:
http://cvs.horde.org/dimp/js/src/dhtmlHistory.js

Usage is as simple as (in an onload function):
if (dhtmlHistory.initialize()) {
dhtmlHistory.addListener([insert function here]);
}

Code does require Prototype 1.5.1+.

Content with Style - Comment #143 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 27 Mar 2007 17:09:35 -0400

Michael,
I’ve had a brief look at it, and it looks like a very nice and clean implementation, and well documented, too!

From what I could see, the solution is mainly (only?) for Firefox and IE. I wonder if and when someone finds the time to do a nicely coded solution that contains the Safari solution as well.
Then again, the one that I was told of, was based on a bug, so that might be fixed with the next release and “break” the back button…
Is there a test case for this anywhere online?

Content with Style - Comment #144 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 27 Jun 2007 14:58:23 -0400

Ok, I understand the usage but why??? If you are creating a TRUE “Internet application”, open the damn thing into a modal-style window with no nav buttons.

You are not enhancing the user’s experience by using AJAX instead of an IFRAME. You are just creating more work for yourself.

I use AJAX for internet applications. Constructed correctly, an Internet Application does not need all of this unnecessary JavaScript and hidden frame garbage. Everyone thinks that the BACK button is an AJAX hindrance; it is not. A website that uses AJAX to load content into a DIV container is just plain foolish and a waste of time. Don’t use AJAX because it is “cool and nifty”, use it only when it is the BETTER alternative.

Use AJAX to run API style calls and “change” the layout of the page dynamically, not import HTML.

To each their own I guess.

Content with Style - Comment #145 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 29 Jul 2007 11:26:04 -0400

Great links, thanks. You’ve set this article up very well. Harry Fuecks’s stuff is excellent and well recommended (JPSpan.)

I’ve also been having some trouble with IE7 on this, but managed to get a work around. Great Ajax functionality, much appreciated.

Lastly, eval does have some uses, even if it is evil!

Thanks again

Content with Style - Comment #146 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 30 Jul 2007 10:23:59 -0400

Hello,

I am using a browser with a built in back button, it’s free and pretty decent. The name is Firefox, Google it.

Seriously, the back button doesn’t need fixing, it’s not broken. The websites you mention need to be fixed. Each website that decides to implement ‘custom’ navigation is so arrogant in presuming that users will not miss the back button behavior that they have to provide that themselves. Otherwise, their funky navigation is just broken.

To the websites that decide to break the back button: Try a usability test, almost all users know and use the back button, it’s big and it’s the first one on the row. Where do you go off breaking such a fundamental part of the User Experience?

End of rant

Content with Style - Comment #147 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 16 Aug 2007 12:36:07 -0400

Is there a way to do this without all the extra files and stuff? Is there just a javascript function that adds what page you loaded to the history or something?

I’m working on a forum, but I can’t have this many extra scripts lying around.

Content with Style - Comment #148 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Fri, 24 Aug 2007 16:12:53 -0400

Maybe browser manufacturers should fix the back button to make it work with our Ajax scripts, instead of us fixing our Ajax scripts to work with the browsers… ? It would make life a lot easier!

This article is great! Thanks for putting your time and effort into fixing the back button, so we didn’t need to use our brains as much! ;)

Content with Style - Comment #149 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 24 Oct 2007 03:28:03 -0400

Have anyone tried unFocus?

Content with Style - Comment #150 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 28 Oct 2007 22:10:28 -0400

Thanks very much, Matthias, I really appreciate it…

Content with Style - Comment #151 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 03 Dec 2007 23:02:11 -0500

There is an article located here

http://www.codeproject.com/KB/ajax/Salajax.aspx

that uses a lot of the techniques outlined in this article but simplifies them by providing a class to do all the hard work, the library is extremely easy to use and seems to work very well.

Content with Style - Comment #152 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 19 Dec 2007 16:33:54 -0500

Maybe browser manufacturers should fix the back button to make it work with our Ajax scripts, instead of us fixing our Ajax scripts to work with the browsers… ? It would make life a lot easier!

Content with Style - Comment #153 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 19 Dec 2007 16:34:22 -0500

Is there a way to do this without all the extra files and stuff? Is there just a javascript function that adds what page you loaded to the history or something?

Content with Style - Comment #154 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 27 Dec 2007 22:00:27 -0500

sharp, see the ‘salajax’ article mentioned above, it has a javascript library that is easy to use and handles the back button etc.

Content with Style - Comment #155 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mon, 07 Jan 2008 23:05:30 -0500

You really just want to put the ajax requests on a stack and pop of the last request when the backbutton event is fired. What is wrong with that ??

Content with Style - Comment #156 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 08 Jan 2008 10:49:27 -0500

@agent_orange: This article was about detecting a back button event, since the browsers don’t expose one to Javascript. What you do with that information once you have it is up to you…

Content with Style - Comment #157 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 16 Jan 2008 04:06:23 -0500

Nice code, i will try to implement in my website. But your demo page does not work at all in Opera..

Content with Style - Comment #158 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 17 Jan 2008 17:41:26 -0500

Is it at all possible to get this sort of functionality for Opera and Safari? Thanks for the gr8 article Mike?

Content with Style - Comment #159 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Tue, 29 Jul 2008 15:15:59 -0400

You’re right – click then back must be one of the most fundamental things about the internet and if that can’t work then everything else (even if it can) will just not be looked at in the same light. It’s a fundamentally fundamental. You really can’t expect to go ahead and design without ensuring something so utterly basic is taken care of.

Content with Style - Comment #160 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 27 Aug 2008 06:13:59 -0400

Your demo page is broken

Content with Style - Comment #161 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Thu, 02 Oct 2008 14:48:39 -0400

I had problems with this. I constructed a BETTER SOLUTION with a WORKING DEMO. Click on my name to see the solution.

Content with Style - Comment #162 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Wed, 29 Oct 2008 10:37:03 -0400

Hello there. Going through things after the relaunch, and seen that the demo was broken, due to a bug in JPSPAN. I fixed this and uploaded a new version. Please refer to the bug description on the JPSPAN sourceforge page. Also, if you folks out there are utilizing the YUI framework (which I'm a big fan of), then it's worth looking into the Browser History Manager, which should do the same thing for you ...

Content with Style - Comment #163 on Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Sun, 14 Dec 2008 16:44:30 -0500

Excelent article, quite usefull. Isn't it easier though to simple have the loaded iframe execute a script to update it's parent hash? Then you only have to poll the hash, which you're doing in normal (non-microsoft) browsers anyway. You still have to make sure you don't do the same in IE and other browsers but it saves some code. So your iframe calls this script from the body (or head for that matter). Assuming you use #var=val#var2=val2 syntax for the hash.


if (parent)
{
  var query			 = window.location.search;
  var hash			 = query.replace(/[?&;]/gi, "#");
  parent.location.hash		 = hash;
}

Then you only have to plug the iframe in IE and the rest works the same as always. No need for polling the iframes location or a function in the iframe.