View full tutorial

In the last episode we added AJAX functionality to a paginated list of products. Instead of acting as normal HTML links, the paginated links had click events added to them via unobtrusive JavaScript so that when clicked they made an AJAX request that updated the main content of the page with a new page of products.

Problems With AJAX

Because we’re using AJAX to update the page the URL doesn’t change when a new page of products is loaded. This means that if we reload the page, or bookmark it and return to it later, the first page of products will be shown no matter what page of products we were on. Another consequence of using AJAX is that changing the page of links we’re viewing doesn’t add the previous page to the browser’s history, so we can’t use the back and forward buttons to move through the pages we’ve just viewed.

So there are disadvantages to our AJAX approach; how can we work around them? That’s what we’ll show you in this episode. Be warned that this episode will be more about JavaScript than Ruby on Rails as the issues we’ll be dealing with are on the client-side.

There are a number of JavaScript libraries we could use to solve this problem. One of the oldest is reallysimplehistory, available on Google code. There is also Yahoo’s Browser History Manager. Yahoo have a number of JavaScript libraries available so it’s worth a look. Another option is Asual’s SWFAddress, which works with Flash as well as JavaScript.

All of the libraries mentioned above work with plain JavaScript, but as we’re using jQuery in our application it would be better if we could find one designed to work with that. Asual, mentioned above, have released a plugin called jQuery Address that would work, but instead we’re going to use a different one called jQuery URL Utils plugin. This plugin has a lot of functionality despite its small size (less than 4KB minified) and comes with good documentation.

Continue reading full tutorial...

Related posts:

1. Deep Linking with jQuery You can view a demo and download the resources for...
2. 10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...
3. Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library Recently I wrote quite a huge chunk of jQuery for...

Related posts brought to you by Yet Another Related Posts Plugin.