Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AJAX and the Browser Back Button

I run a browser based game at www.darknovagames.com. Recently, I've been working on reformatting the site with CSS, trying to get all of its pages to verify according to the HTML standard.

I've been toying with this idea of having the navigation menu on the left AJAX the pages in (rather than taking the user to a separate page each time, requiring a reload of the title and nav bar, which almost never change) and I know that if I do so, I will probably break the Forward/Back buttons in the browser. My question I guess is, should I go ahead and AJAX the site, thus requiring the user to use the sites navigation to play the game, or should I leave the site as it currently stands, and use standard hyperlinks and things for navigation?

The reason I ask I guess is that I built a forums system into the site, and a lot of times I would want to link say to a particular topic within the forums.

I'm also open to suggestions. Is there a standard (preferably without traditional frames) way to make only the body area of the site reload, while still changing the URL so that users can bookmark and forward/back, etc? That could potentially solve my problem as well. I'm just asking for the best solution here, not an answer to a specific question. ^_^

Thanks

like image 628
Nicholas Flynt Avatar asked Oct 02 '08 17:10

Nicholas Flynt


People also ask

How do I get my back button to work in Ajax?

To make back button work with AJAX, catch onpopstate event. This handler is triggered that changes the url when back button is clicked. On this event, send AJAX to location. href .

What is Ajax in browser?

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

What is an Ajax button?

The AJAX Button is a wireless panic button that, when pressed, transmits an alarm to users, as well as to the security company's CMS. The button is equipped with protection against accidental activation and transmits alarms at a distance of up to 1,300 m from the hub.


1 Answers

Use ajax for portions of the page that needs to update, not the entire thing. For that you should use templates.

When you want to still preserve the back button for your various state changes on the page, combine them with # achors to alter the url (without forcing the browser to issue another GET).

For example, gmail's looks like this:

mail.google.com/#inbox/message-1234

everything past the # was a page state change that happened via ajax. If I press Back, I'll go to the inbox again (again, without another browser GET)

like image 179
Ben Scheirman Avatar answered Sep 30 '22 16:09

Ben Scheirman