The cure for Ajax - History and Remote

One of the biggest problems people see with Ajax is the back button. How do you get that to work with an Ajax application? It can sometimes turn people away from Ajax.

This has been fixed, to an extent, by various groups. Most recently, Yahoo! UI and the ASP.NET AJAX Futures team have both provided this functionality. I just recently came across a dilemma... I needed this functionality for a client's site I am currently working on. We are building a gallery of images and we need back button and URL support.

Since I am a big fan of jQuery, I checked out their plugins part of their site. I then stumbled upon the jQuery history/remote plugin by Klaus Hartl. This solution is basically the same as the YUI and ASP.NET AJAX solution. More on that later.

I plugged it in and, low and behold, it took me LESS THAN10 lines of code! I was amazed! There are 2 ways of doing it (I chose the second).

Examples, Examples, Examples

1 - Remote ("Hijax")

$(function() {

               $('a.remote').remote('#output', function() {
                    if (window.console && window.console.info) {
                        console.info('content loaded');
                    }
                });
               $.ajaxHistory.initialize();
            });

</script>

.....

<a class="remote" href="chapter-1.html" title="Chapter 1">Load Chapter 1</a>

<a class="remote" href="chapter-2.html" title="Chapter 2">Load Chapter 2</a>

<a class="remote" href="chapter-3.html" title="Chapter 3">Load Chapter 3</a>

<div id="output"></div>

The remoting basically takes the result of a page into a div. It replaced the hrefs of the links with the class remote and puts something in there like #Chapter1 (It uses the Title attribute to determine what comes after the #). This is useful if you are doing lists of some sort.

2 - History

$(function() {
                $('a.history:eq(0)').history(function() {
                    $('#show-hide').hide();
                });
                $('a.history:eq(1)').history(function() {
                    $('#show-hide').show();
                });
                $.ajaxHistory.initialize();
            });
        </script>

<a class="history" href="#hide">Hide next paragraph</a>

<a class="history" href="#show">Show next paragraph</a>

<div id="show-hide">Some text.....</div>

Now this example registers the #hide and #show commands to different events. You put :eq( -THE NUMBER- ) after the CSS identifier to show that the first one on the page does one event and the second does another. The numbering MUST start with 0. This is good for doing just about anything!

How this stuff works

The YUI, ASP.NET, and jQuery versions of the history manipulations work almost EXACTLY in the same ways. What they do is make the link act as an anchor trigger. But really what happens is an IFRAME is created and manipulated. You don't see the IFRAME... its actually hidden from you. How cool is that?!

I would recommend taking a look at the YUI plugin if you use YUI. I would suggest using the ASP.NET AJAX history manager sparingly... you don't really have much control over it as much as you would with YUI or the jQuery version. But who am I to tell you not to use it :)

So this is cool stuff... even if it does take a small toll on how much JavaScript is pushed out to your client. All in all, the benefits completely outweigh the down sides of this technology.

EagleEnvision.NeT Blog