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

Comments

  1. 1 Chris Gee July 5th 2007, 05:37

    GREAT! Gave me some fantastic ideas!

  2. 2 Nick September 13th 2007, 05:24

    Hi,

    I tried to implement this on my EE site, and most of it works, but I’m getting a weird bug. The article links work fine, but links outside of <ul id=”ya”> are being generated inside my results <div>. I can’t for the life of me figure out why! If you have any insight, it would be much appreciated.

    http://www.oldgoldandblack.com/index.php/ee/archives

  3. 3 Stas December 17th 2007, 19:01

    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:

    And what place I should keep this scripts

  4. 4 Low December 17th 2007, 21:09

    @Stas: I prefer keeping my .js files separate from my EE installation, so I keep them in a /js/ folder in the root of my site.

  5. 5 Stas December 17th 2007, 21:28

    var YA = new Object();

    where should I place this code, I’m a real Newbie

  6. 6 Low December 17th 2007, 21:42

    @Stas: create a new JavaScript file and add the code in there, link to it in the head of your page using a script-tag.

    Also, if you’re a real newbie, you might consider looking into the basics of JavaScript first, so you know what you’re doing (at least a bit). There are plenty of tutorials to be found.

  7. 7 Mike April 23rd 2008, 01:24

    hmmm

  8. 8 Jörn Röder July 25th 2008, 17:39

    Hi,
    nice script, but does it work with mootools 1.2 too?

  9. 9 Low July 27th 2008, 11:21

    I haven’t tested this script with mootools 1.2, Jörn. But if it doesn’t work, you can probably modify it a bit so it does, without too much effort.

  10. 10 Chris June 19th 2009, 05:30

    Sorry for dragging up an old article but I was wondering if anyone has successfully done something similar with jQuery. All of my other scripts use it and I’d hate to have to include yet another library just for one section of the site. Any help would be appreciated!

  11. 11 Low June 19th 2009, 09:00

    Chris, @erwinheiser did something similar over at Rorotoko using jQuery.

  12. 12 Chris June 21st 2009, 04:57

    Thanks Low! That pointed me in the right direction. I thought I had bit off a little more than I could chew being a jQuery novice but with taking a peek at that code, I’ve been able to duplicate almost all of your original Mootools code. All that’s left is the throbber image and it should be good to go. Thanks again!

    All the best,
    Chris

Commenting is not available in this weblog entry.