Maintaining the back button with AJAX

When I blogged about whether or not you can use too much AJAX on your website.  The short answer was no; with one caveat being that you must not lose the user interaction experience.  In this scenario I’m referring to the back button.  If the user has “felt” like the content changed, they are likely to click the back button to return.  If they do this, it’s important for them to “go back” to where they “think” they were and not the last page that was loaded without AJAX and simply relying on Javascript events!  I’ve put together a quick example of how to do this.

Overview

The following example is written using CakePHP.  You do not need to use this framework to make this work, I just like using it to shorten my typing!

Once this example is completed, your website will be able to allow users to “navigate” to links within your site, but be loaded via AJAX (to save on bandwidth and load time) while maintaining the history of the back button.

Setup

To begin we will need a couple of Javascript libraries:

Jquery

Jquery History (plugin)

Next we will need create a couple of example HTML pages that will be loaded through AJAX.  If you are using CakePHP, create two new views in your pages directory called: 1.ctp and 2.ctp; if you are not using CakePHP these can just be regular HTML pages in your webroot.

Implementation

Again, if you are using CakePHP create another new view in your pages directory called home.ctp.  This is where we will place the core JavaScript array and initial HTML to implement our process.  If you are not using CakePHP, this can just be your index.html page.

[code]<?php echo $this->Html->script(‘jquery’);?>

<?php echo $this->Html->script(‘jquery.history’);?>

<?php echo $this->Html->scriptBlock(‘

jQuery(document).ready(function($) {

function load(hash) {

$(“#ajax-content”).load(hash);

}

$.history.init(function(url) {

load(url == “” ? “pages/1” : url);

});

$(“#ajax-links a”).live(“click”, function(e) {

var url = $(this).attr(“href”);

url = url.replace(/^.*#/, “”);

$.history.load(url);

return false;

});

});

‘);?>

<ul id=”ajax-links”>

<li><?php echo $this->Html->link(‘Page 1’, ‘#pages/1’);?></li>

<li><?php echo $this->Html->link(‘Page 2’, ‘#pages/2’);?></li>

</ul>

<div id=”ajax-content”>

</div>[/code]

The above example is courtesy the demos on Jquery History’s website that have been slightly altered to work with CakePHP.

In the above Javascript code, any link inside of the id “ajax-links” will automatically replace the URL with whatever comes after our # sign in the links.  This URL will then be called via AJAX and the contents will be loaded into “ajax-content”.

Try it out for yourself and see how the back button is maintained with each link you click.

Optional CakePHP

If you’re using CakePHP you may have noticed two things.  You are probably receiving an issue with the Javascript helper.

This can be fixed by copying the app_controller.php from cake\lib\controllers to the root of your app directory.  Once copied, open the file up and add the following just below the class declaration:

var $helpers = array(‘Js’);

The second thing you will notice is that our layout is loading inside of our layout.  To solve this, include the following line of code below the one we just added above:

var $components = array(‘RequestHandler’);

This will now detect AJAX calls and automatically ensure they use the AJAX layout instead of the default layout.

Summary

In less than 10 lines of Javascript code, you can speed up your user’s browsing experience without sacrificing the interaction.

Enjoy!