Ajax Archives in ExpressionEngine

Ever since the Ajax hype began, there’s been talk about its proper use. Yes, with great power comes great responsibility, so you should think twice before you sprinkle Ajax fairy dust over your web site. But that doesn’t mean you shouldn’t use it at all. There are several places where I think it could be quite suitable. For example: browsing through blog archives, like mine.

Instead of clicking a month, waiting for the page to load, look through the entries, click Back, repeat, rinse, etc, you can now get served almost immediately. So, how to go about and do this, you ask? Let me explain.

Create your templates

First of all, make sure your archives work without all the fancy stuff. Create your list of archive links with either the Archive Month Links Tag or my own Yearly Archives plugin, and make sure those links work. Also, make sure your list has a specific id — for example: “ya” — so we can refer to it later on. Once that’s done, we can begin progressive enhancement.

In a separate template, put your weblog entries that you’re going to retrieve with Ajax. This should be a very basic template: you’re going to use its output to refresh your normal archives page. Something like this:

<ul>{exp:weblog:entries weblog="blog" display_by="month" sort="asc" disable="custom_fields|member_data|pagination|trackbacks|categories"}
 <li>{entry_date format="%d"}: <a href="{url_title_path=blog/entry}">{title} ({comment_total})</a></li>{/exp:weblog:entries}
</ul>

Add some JavaScript

I’m not going to start a discussion about JavaScript libraries here. In this case I’m using Mootools v1.00, which gives me an excellent start to work with. For the actual magic to happen, you need a custom script. I prefer to objectify my JavaScript, which means you could start like this:

var YA = new Object();

We’ve just created an object called YA (as in Yearly Archives), that we’re going to extend with several functions.

YA.init

YA.init = function() {
 window.addEvent('domready',function() {
  if (!$('ya')) return;
  YA.build();
  $$('#ya a').each(function(el) {
   el.addEvent('click', YA.get);
  });
 });
}

The init function adds an anonymous function to the domready-event, which will fire as soon as the DOM is ready (duh). The anonymous function checks if an element with id “ya” exists, executes YA.build() and adds the function YA.get() to the onclick event of each anchor in the ya-element.

YA.build

YA.build = function() {
 // create result div
 this.container    = new Element('div');
 this.container.id = 'ajaxresult';
 this.container.injectAfter($('ya'));

 // create throbber
 this.throbber = new Throbber('throb-target');
}

The build function creates a div-element. This element will be filled with the archive entries: it’s the container for the results. After it’s created, it’s inserted immediately after the ya-element. Secondly, a throbber is created to indicate activity. I’m using my own Throbber class for that one.

YA.get

YA.get = function(ev) {
 var ev = new Event(ev);
 if (ev.shift || ev.control || ev.alt || ev.meta) return;
 YA.throbber.on();
 YA.load(ev.target.href);
 ev.preventDefault();
}

The get function is fired each time an anchor in your archive list is clicked. The script aborts if a key was pressed simultaneously. It then turns the throbber on, tells our YA object to load the entries linked by the anchor and prevents the default action from happening.

YA.load

YA.load = function(url) {
 var url = url.replace('group/template','group/basic-template');
 new Ajax(url,{
  onComplete:function(r){
   YA.container.setHTML(r);
   YA.throbber.off();
  }
 }).request();
}

The load function is responsible for the Ajax request. First, we need to modify the url so it points to our basic template, instead of the full archive template. Change the group/template and group/basic-template bits to whatever works for you. We then call the Mootools Ajax class and add an anonymous function to its onComplete parameter, which will insert the results into the container we created with YA.build and turns off the throbber.

That’s it!

Or is it? There’s only one step left: execute the init function, thus:

YA.init();

Now we’re done. Want to see it in action? Check out my archives. They’re in Dutch though, but the effect is the same.

April 11th 2007 | Ajax, Archives, ExpressionEngine, JavaScript, Mootools | 12 comments

For EE Add-ons, go to Low