Tutorials Loading and animating an entry with AJAX and jQuery

Wil Linssen / 21st February, 2009
Sometimes you might want to load the content of an entry without leaving or refreshing the page, and it’s possible to do just that with AJAX. In this tutorial we’ll look at how to swap the content of an area on your page with a new entry AND animate the transition with some nice effects.

Step 1: Set up the page and area to load your entry

We’ll be using jQuery’s AJAX and effects functions so first things first you’ll want to download the latest jQuery pack. To get jQuery working in your site you’ll need to include it, I do it by adding it as a javascript template then including it in the header, something like: 

<script type="text/javascript" src="{path=includes/jquery.min}"></script>

To make this work we’ll be using two templates – one for the container (the main page) and one for the entry we’re loading. For the purpose of this tutorial we’ll assume that we’re working with news items. The first containing template will be called “news” and the second (individual item) will be called “news-item”.

Here’s the basic content of “news”: 

<div id="news-item"> 
  {embed="news-item"} 
</div> 
<ul id="news-links"> 
  {exp:weblog:entries weblog="news" sort="desc" dynamic="off"} 
  <li><a href="{title_permalink="news/"}">{title}</a></li> 
  {/exp:weblog:entries}
</ul>

The “news-item” div will be the area we replace with our AJAX, and the unordered list is just a list of the articles we can load. The advantage here is that even if javascript is deactivated it will still work – it will just reload the page. You may have noticed the dynamic=”off” part of the tag, the reason for this is that if you load a single entry on with this template it will display the correct information in news-item, but without the dynamic=”off” we would only see that entry in the list. This just ensures we’ll get ALL of the other entries as options to view.

Now for the “news-item” template: 

{exp:weblog:entries weblog="news" limit="1" sort="desc"} 
  <h1>{title}</h1> 
  {body} 
{/exp:weblog:entries}

Pretty straight forward really, just loads the single entry and pops it out however you want: we’re just putting a title and body.

So far that’s great, what we’ve now got is a page that will load a single entry then list all others in descending order. If you click one of those entries in the list, it will show that entry.

Step 2: the clever jQuery bit

So we’ve established that if you click one of the links it will load that content, but what we want to do is load it without changing the page or refreshing. We’ll use jQuery to intercept the links and handle them accordingly. You’ll need to include or add this javascript in the “news” page: 

<script type="text/javascript"> 
  $(document).ready(function() { 
  $("#news-links li a").click(function(){ 
    // capture the url to load from the href 
    var urlLoad = $(this).attr("href"); 
    // slide up the div to hide the swap 
    $("#news-item").slideUp(function() { 
      // load the second template with AJAX 
      $("#news-item").load(urlLoad, function() { 
        // once the load is complete, slide back down 
        $("#news-item").slideDown(); 
      }); 
    }); 
    // just make sure the page doesn’t reload 
    return false; 
  }); 
}); 
</script>

That script will…

1. Intercept the hyperlinks in the “news-links” unordered list.
2. Slide up the “news-item” div
3. Load the content in the link using AJAX into the “news-item” div
4. When the load is complete, slide back down

All done!

That’s all there is to it, you could chop up the jQuery in step 2 to change the effects as you please the slide up and down is just a suggestion, you could just as easily add a fade.

  • Wil Linssen

  • Wil is a fully fledged web geek who runs Linssen who do web design. He can also be found sounding off on twitter as linssen or maintaining his tips-for-nerds type personal blog.

Comments

  • John Faulds on February 21 2009 at 10:25pm

    I wrote about a similar technique on my site recently but mine moves through a series of posts in consecutive order.

  • Stan on February 22 2009 at 8:28am

    Excellent tut. Very clear and detailed. Just what I needed to get my feet wet with AJAX. Used jquery a lot for interface interaction but not ajax yet.

  • Richard Angstmann on February 22 2009 at 12:27pm

    Is there a demo where I can see this in action? Sounds great. Cheers!

  • Jamie Pittock on February 22 2009 at 8:47pm

    Richard, Wil’s using this technique in the portfolio section of his own website. Click the thumbnails along the bottom.

  • caruso_g on March 18 2009 at 10:09pm

    Is there a live preview of the effect described in the tutorial. It would be really nice to take a look to the finished effect with a real example.

  • fitzage on April 02 2009 at 9:44pm

    This doesn’t work quite right for me. If I set the permalink as being “news/” is the example shows, jquery loads the entire page inside the div (header and all).

    If I set it for news-item it works correctly, but then lack of javascript gives a page that just has the single item info, and none of the site framework.

  • Fred Soler on April 07 2009 at 3:32pm

    Hi Wil! Thanks for the tut it works fine for me, that’s nice.
    But i have a problem, maybe someone can help me:

    When you’ve loaded the new content, is it possible to work with elements of this new content?
    For example, I want a simple button to go back to the first content with the same effect, how can I do this?

    Bye.

  • Tyler on April 07 2009 at 6:23pm

    Would it be possible to use this technique but in the form of a graphical tooltip (to display more data about an entry in a list without changing the page). If so, any ideas?

  • Wil on April 15 2009 at 8:45am

    @fitzage I’ve actually updated the code to handle just that problem. Now instead of using the url of the content you want to load in the ‘frame’ you would create that url on the fly. That way you can preserve the link to the full content.

    So you can add whatever URL you like in the HREF section of the A tag: just use the ID as the URI for your AJAX loaded content.

    <a href="some-other-url" id="uri-of-news-story">Content</a>

    Then in your JavaScript you’d just strip out the ID from that A tag:

    var urlLoad = "/_news_item/"; urlLoad += $(this).attr("id");

    That should solve any problem if JavaScript isn’t enabled, and will work nicely with SEO too.

  • Wil on April 15 2009 at 9:02am

    @Fred Soler if you wanted to add navigation buttons you could always use the :eq function in jQuery…

    var urlLoad = "/_news_item/";
urlLoad += $("#news-links li:eq(n) a".attr("id");

    Where n is the number of the list item you want to load. Check out the selectors documentation for a bit more info.

  • fitzage on April 19 2009 at 2:47am

    Thanks, Wil. I’ll give it a shot.

  • Avi on May 06 2009 at 1:23am

    I wrote a plugin which can make something like this even easier, without the need to have two different templates.

    The usage is something like this:

    
{exp:ajax_panel name="somename"}
{exp:weblog:entries}
somestuff
{/exp:weblog:entries}
{/exp:ajax_panel}

    Now if you make an ajax request like this:

    
$.get("mypage?ajax_panel=somename")

    It will only load the part of template which is surrounded by these tags! No more need for two templates.

    It also works great for an ajaxable calendar.

  • Trev on June 18 2009 at 4:43am

    Thanks for this info, much appreciate it!

    Is there any way to prevent the same link from being loaded more than once? Currently if someone accidently clicks the active link, it reloads the same page. Ideally the current href should not trigger a reload.

  • kodegeek on July 27 2009 at 5:51am

    Did you do anything about login, register, comment using ajax? or any resources???

  • Wil on August 05 2009 at 12:15pm

    @Trev you could always keep track of the current loaded item by using a global variable. So…

    global variable

    var currentlyLoaded = "";
$("#news-links li a").click(function(){
  if ($(this).attr("id") != currentlyLoaded) {
    // do the stuff
  }
}

    It’s important that the variable is defined outside the scope of the function we’re calling, otherwise we’ll lose it when the function ends.

  • tzJam on August 05 2009 at 3:11pm

    Wow, actually forgot the Jambor•ee was back.
    The portfolio demo for this over at http://creativelytechnical.com/portfolio/ is awesome.
    I’ve had something like this in mind for a gallery for a long time.
    John Faulds idea about doing consecutive posts ajax is pretty cool too: http://www.tyssendesign.com.au/articles/cms/fetching-posts-in-wordpress-expressionengine-with-jquery-ajax/ the animation isn’t quite as smooth there. Replacing animation types in jQuery is very easy though.

  • sam on August 25 2009 at 8:51pm

    Straight forward tutorial. How about this jquery easy slider interface here – http://features.bizmore.com/ Any tutorials on how to achieve this effect in expression engine?

  • ekşi on September 09 2009 at 12:31pm

    @Wii, thanks very much. I will use it on my new web site.

  • Stefan on October 24 2009 at 1:44pm

    how can i get a link from within the content div to open new content within itself ?

  • wil on October 24 2009 at 11:34pm

    Hello

  • Home Remedies on November 01 2009 at 6:06pm

    When you’ve loaded the new content, is it possible to work with elements of this new content?

  • Abbott on February 11 2010 at 2:37pm

    Wow, I wished I had found your blog a few years ago. This is a battle I have been having for most of my life….I’m going to go grab a cup of tea and continue reading some more….
    US auto insurance directory

  • Jorge on February 12 2010 at 10:47am

    Great idea – so many times we can think that we can only try one of these tips at a time to get the results we desire. How much further from the truth could that be? When they are all used in conjunction we can multiply our return.
    placemat

  • Jhon Black on February 14 2010 at 1:43pm

    thanks. yes, content is king, so time spent on great writing is well worth it. i’ve yet to buy links, what are your thoughts on it???
    drink coasters

  • Adley Fair on February 26 2010 at 4:22pm

    Thanks, Very interesting read, I’ve been really enjoying checking up your posts from time to time. Looking forward to see your future posts smile.
    wedding stubby holders

  • Ashley on March 01 2010 at 7:14pm

    I was surfing when I passed by your website. I must admit that I really enjoyed the quality information you offer to your visitors… Will be back often to check up on new stuff you post here!
    stubby holders

  • Abbott on March 07 2010 at 5:41am

    I’ve read Nancy Miller’s newest article and it’s remarkable! I’m trying to read all these articles afterward. Thanks for the great stuff!
    pc repairs

  • local search marketing news on March 09 2010 at 7:33am

    Its very useful information for adding data in to website. Its very easy method. I will download it and add data with it. Thanks its very good information.

  • search marketing news on March 09 2010 at 7:36am

    AJAX and jQuery is very good things. Its make very easier of data adding and editing. Its very good for saving time. I will try it.

  • Adley on March 10 2010 at 6:33am

    Very interesting as well as informative post.Thanks for providing for us.I read your article with my pleasure.
    montreal asian escorts

Comment Form

  • Should you care, Gravatars are enabled.

  • We will link to the URL but we utilise the 'nofollow' attribute value.

  • pmCode is disabled. Textile formatting is available. Code blocks should be wrapped with <pre> and <code> tags. Always play nicely.

Advertisment (Want to advertise here?)