Solving the problem of “back” button in Ajax applications

Diego Pessoa — Tue, 10 Mar 2009 00:18:27 +0000

Who here has always dreamed in do Ajax applications that the user can freely navigate using the back and forward buttons, and furthermore, can bookmark specific sections? In theory, this isn’t possible, since the “Ajax” is used by most to reload just some page blocks, keeping active the main page and, consequently, precluding the back button or bookmarks use. Otherwise we’d have the good old reload of the entire page.

But then, how the Gmail works? It’s totally in Ajax and yet you can navigate using the back button. If you put a link like: http://mail.google.com/mail/#compose in the address bar, it will open the e-mail composition screen normally. The big secret is in the #anchors.
Anchor Oriented Navigation

A very interesting thing of the anchors is that they allow you to use the back and forward button, for example, without generate no one full page request and without leaving that page, so, how could we do this?

The first step is create a Javascript file that will be every time verifying if some anchor is active, if so, it sends the Ajax request calling the specific section, based on anchor’s name, that will be loaded inside the main block. Simple, isn’t it?

As is usual for JavaScript today, we will use jQuery, so remember to include the library file in your application.

We would then have a file named “core.js”, thus:

/**
* Loading the page, the timer is started to check if there is an active anchor to each 300ms. */
$().ready(function(){
setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
/**
* Method to check if there is some anchor change, if so, sends the Ajax request.
*/
function checkAnchor(){
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
/**
* If doesn’t have no one active anchor, the default section is loaded
*/
if(!currentAnchor)
query = "section=home";
else
{
/**
* Creates the result string. Converting the url: URL/#fotos&id=2 in URL/?section=fotos&id=2
* */
var splits = currentAnchor.substring(1).split(‘&’);
var section = splits[0];
delete splits[0];
var params = splits.join(‘&’);
var query = "section=" + section + params;
}
/**
* Sends the request
*/
$.get("callbacks.php",query, function(data){
$("#main_block").html(data);
});
}
}

OK, the content will be loaded in th e element of ID “main_block” through the Ajax request result that being sent to the page “callbacks.php” in GET Querystring format.

To catch it, we would have something like this:

$section = addslashes(strip_tags($_GET[’section’]));
$page = "pages/".$section.".php";
if (file_exists($page)) {
include($page);
}

Thus, we would need only a folder called “pages” containing the pages with the anchors’ names.

And to call each section, a simple html page with links like:

http://mysite.com/#photos

It would be detected by the Javascript method “checkAnchor()”, and will be call a php request loading the page named photos.php inside the directory “pages”. It will exhibited inside the block “#main_block” that is contained in the same page of the clicked link, and the best of all, you can back, forward and bookmark the sections you want.

To better illustrate the example, I made a blatant copy (haha) of the PHP-PB’s site, with the only difference of having Ajax navigation through anchors (the original has normal navigation). Access the link: http://www.diegopessoa.com/php-pb-ajax

If you want to download the working example, click here!

Diego Pessoa » Jquery

Solving the problem of “back” button in Ajax applications