AJAX and the "Back" button in IE

minorgod · #1 (**permalink**) 11-11-2009, 03:45 PM

Greetings,
I've been working on a site that uses AJAX heavily for navigation and I'm having an issue with the "back" button in IE and I don't know if the fix might be something as simple as an Apache config change or if I need to use some more sophisticated app logic to work around it, possibly some kind of javascript history manager such as the YUI history manager. Here's a fairly detailed description of the prob (I can't reveal the web site for now). I'm just trying to fully understand this problem first so that I can come up with the best fix:

User loads a product category page with a several pages of products via a normal browser GET request. The category page has a bunch of AJAX-enabled filters and paging buttons to refine the results and let you page through them via AJAX requests. If they go to page 2, an AJAX POST request is performed via jQuery which sends off all the selected filter options and the page number, then the products are returned and redrawn without a page reload. On each request, the current set of search options are saved to a session var so they can be reloaded if the user goes to a product detail page and then clicks their browser's "back" button. We also have a graphical "back" button on the product detail page which has a hard link back to the search results page. If our users use that graphical button to go back, then their search options are always restored properly because I am guaranteed that another GET request is sent to the server and I can ensure the interface is redrawn with the last saved state wherever they left off. However, if they click their browser's back button it works for some browsers and not for others. Firefox works the way I want it to - it shows the interface in the last state it was in. I don't know if FF is doing a new request when you click the 'back" button or if something else is happening, but it works. However, IE does NOT reload the options in their last state. It shows the options in the state they were when the user first loaded the search results page, even though the options are properly saved in the session. Doing a manual reload of the page in IE after clicking the "back" button will load the saved options properly from the session, so the problem seems that IE is too dumb to restore the last page state without doing a new request to the server. It seems like I need to force IE to do a new request when the user clicks the back button. Perhaps I need to disable caching for that page just for IE users?

The weird thing is, I've been told by other developers that this used to work fine on the site and at some point it broke. I don't want to waste a bunch of time looking for a JS solution if I can just disable caching for that page in IE. Any thoughts are appreciated.

DaveSawers · #2 (**permalink**) 11-11-2009, 06:53 PM

You can intercept the back button request in your Javascript and process it so it forces the right reload.

Actually not quite true...

You can intercept leaving the page by setting an onUnload or onBeforeUnload event in the <body> tag. But you can't determine why the unload is occurring. It may be because the back button was pressed or it may be something else. Hmm.

deepsand · #3 (**permalink**) 11-12-2009, 06:55 PM

The problem lies, not with IE, but with AJAX itself, in that it breaks statefullness with regards to the browser's history, for which there is no single best solution.

555,000 hits at ajax back button - Google Search attest to your having much company here.

Somewhere in there is a fix for your specific application.

Good luck.

NJ · #4 (**permalink**) 11-12-2009, 11:31 PM

Interesting problem! You have given more details than most posts have. Whether Wikipedia is next to Google in the evil empire, or the best thing that has happened to the web, they actually address this issue. "Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine, so clicking the browser's "back" button may not return the user to an earlier state of the Ajax-enabled page, but may instead return them to the last full page visited before it. Workarounds include the use of invisible IFrames to trigger changes in the browser's history and changing the anchor portion of the URL (following a #) when Ajax is run and monitoring it for changes.[13]"
Ajax (programming) - Wikipedia, the free encyclopedia

This comment is linked to this page: Article :: AJAX: Asynchronously Moving Forward :: Why use AJAX?

These seem to agree with deepsand.

Personally, while JavaScript is a powerful tool, it is constantly making a fool of me!

on-SEO · #5 (**permalink**) 11-13-2009, 07:44 AM

I love AJAX for it's ability to act more like a desktop application without the reloading of the entire page, but as for SEO, well that's another story.

As to your concern, couldn't you just specify on the page that the user should use the 'back' button you provide and not the browser's 'back' button?

Harris Interactive's Harris Poll site states that right at the beginning of a survey. Maybe the best solution is telling your users what to do and what not to do, at least that way they won't be surprised if the browser's 'back' button acts strangely.

DaveSawers · #6 (**permalink**) 11-13-2009, 10:00 AM

What to do in this situation all hinges on why you are using AJAX. It is a brilliant tool for the partial updating of web pages and for the building of web based applications. There are a number of solutions to the back button problem.

In the web based applications I have been developing recently, AJAX is used everwhere. Everything is done on a single web page URL and all changes of state are shown using AJAX. Using the browsers back button takes the user to whatever page he was viewing before entering the application. Going forward again returns the user to the application in exactly the state he left it. That is the forward and back buttons have no effect within the application. Undo and redo buttons are provided in the application to undo and redo the last action and these are effectively the back and forward buttons for the application.

Simple uses of AJAX such as providing extra information on a page after clicking or mousing over something usually don't need to be remembered in the browser history. For example, you may be looking at information on a product page and there is an area on that page that contains several tabs, each containing more info on the product. You can legitimately expect the back button to take the user out of that page entirely and therefore not have to remember which tab was being looked at within the browser history. The actual tab being viewed can be remembered in a cookie so that when the user goes forward again the anticipated info is displayed. As an example of this (OK, not a very pretty one) see: Future Shop: Computers: Laptops: HP 15.6" Intel Pentium Dual Core T4300 2.1GHz Laptop (G60-530CA) - Black there are tabs part way down the screen and flipping between "Special Offers", "Customer Reviews" and "Expert Advice" show more info which is not remembered by the browsers history. This is what I as a user would "expect" the page to do.

It's those in between applications that are problematic and yours presumably falls into this category. My suggestion would be to design your way out of it; or in other words implement something that falls into one of the above two categories.

jollymoon · #7 (**permalink**) 11-13-2009, 06:24 PM

I sure wish I could fix my "back button" issue.

I have an AJAX enabled menu on this website:
NANYANA / SUMMER

I had to use "back" buttons on every page and if there was more than one page, the "back" button would go all the way to the "front" of the website menu page, instead of back a couple of pages.

Drives me crazy, but I am committed to the slide in / slide out webpage menu style in order to keep the slideup menu line at the bottom of each page.

I also had to use iFRAMES in a couple of places to get the JavaScript to do what I wanted (cufon font embedding, lightbox, popups,etc.).

I even had to put little text underneath the "back" button so people would know how to get to their starting place!....

Hope to find a better solution before website goes live...who knows? I might get lucky...

DaveSawers · #8 (**permalink**) 11-14-2009, 01:07 AM

Quote:

Originally Posted by jollymoon

I sure wish I could fix my "back button" issue.

I have an AJAX enabled menu...

This to me seems to be the epitome of poor design. I'm not talking about the graphical design or about what comes up on each page but about the implementation of the concept.

Since you are replacing the entire page content each time a menu option is selected, you don't need to use AJAX at all. Not using AJAX for this application would solve your back button problem right away.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
"acceptance of terms" button before proceeding..	steve0	Web Programming Discussion Forum	2	08-15-2007 08:51 PM
Try this "I'm Feeling lucky button!" so funny :)	jhlim	Google Discussion Forum	5	11-09-2004 05:28 PM
Obscure "Links" Button	ldylion214	Search Engine Optimization Forum	2	07-02-2004 08:49 PM
how do you disable "view source" button?	apsadmin	Graphics & Design Discussion Forum	15	06-05-2004 08:35 PM
"Close This Window" Button in Flash	clambam	Flash Discussion Forum	1	11-18-2003 03:03 PM