I have recently been getting back into Umbraco and I really like this CMS. The community is awesome and has helped out of sticky situations many times. I felt it was time to give something back and decided to write this article.

The Ajax “load more” buttons are more or less standard these days. It’s not rocket science to make your own “load more” button but in Umbraco it can be a bit tricky to get everything to work without compromising the “semanticness”, “dynamicness” and the overall quality of the code. This is the end result and this is how I have solved it:

Creative Website Starter

I’m going to base the examples off of Warren Buckleys “Creative Website Starter”. You can find that in the package repository. The section that we are going to “impaginate” (Yes, I just made that word up) is “News and Events”. I added some more events so we have something to work with.
This is what we’ve got so far:

XSLT Pager!

For the sake of this example we’ll make a pager that lists 3 events/new items per page. Why are we making a pager you may ask? There are many reasons. Read more about those reasons here.

Go to “Developer” -> “XSLT Files” -> “ListNewsEvents.xslt” or open it up in your IDE. Nibble have written a paging XSLT that I have been peaking at. So, time to inject some of Nibbles XSLT into ListNewsEvents.xslt.
I copied the variables and altered them a bit (we only want 3 records per page for example).

pageNumber gets its value from the query string and numberOfRecords is pretty self-explanatory. Now we need to actually limit the records (Events/News items) to the value we have given the recordPerPage value. To do that we add an if-statement encapsulating everything in the currentPage loop. The statement stolen from Nibbles paging.xslt.

And so is the following code that we add at the very end of “ListNewsEvents.xslt”.

I wrapped the paging links in a div with the class “pageNavigation” and added a “page” variable on the querystrings on the links. So that these links <a href="{umbraco.library:NiceUrl($currentPage/@id)}/{$i}"> looks like this <a href="{umbraco.library:NiceUrl($currentPage/@id)}/?page={$i}">

Now, if we try this out it should work both with and without javascript.

Time for Some Umbraco Magic

A cool thing in Umbraco is that you can you use alternate templates. This means that we can get different content depending on which template we choose. You can read more about alternate templates here.

First thing first though. Go into “Developer” -> “XSLT Files” and create a clean xslt file with macro. I called it ListNewsEventsAjax. Go to “Settings” -> “Templates” and create the alternate template. I named the template “News and Events Ajax” and the alias “newsAndEventsAjax”. Press “Insert Macro” and insert the macro we just created.

We are going to call the alternate template with Ajax so the XSLT needs to return the Events/News that we request. The ListNewsEvents.xslt has almost everything we need for the alternate template already so copy the code from ListNewsEvents.xslt over to ListNewsEventsAjax.xslt. We don’t need all the code so let’s start deleting. First, remove the newsList div (not the content of the div though). Delete the whole “pageNavigation” div (we don’t need the pager). Remove the “for.loop” template because that template is only called from within the pager. Where the pager was we now want a “load more” button. But only if there is more content, so surround the button with an if-statement like this:

Let’s Spice it with Some JavaScript and AJAX

Download a good looking “loading gif” from ajaxload.info or something. I took this one:

And add it to the css/img folder.

Since CWS come preloaded with JQuery (and some other sweet stuff) you can start coding away at once. CWS should have added script.js in the “scripts” folder. Open that up. At the very top, add the variable “loadCount”. Since the first set of “records” we want is from the second page (we already have the first set of “records”) we give it the value “2”.

Create a function called initLoadMore() and call it from the $(document).ready() function that is already created in the file. Add the following chunk of code to the function (I have thrown in some comments).

If we try to press the “Load more” text now we’ll hopefully get the following result:

Finishing Polish

We’re almost done. It obviously needs some styling. Go into the css file CWS added (css/Styles.css) and the following chunk off CSS where it’s appropriate (somewhere under the “NEWS LIST” header).

This is how the end result looks like and if you want to download the files you can do that here. I’m very sorry that the code is in image form, it is a total pain in the membrane to write code on Swedish Fika right now. A new version of SF, that make this and other problems die, is on the way. Give me a comment if anything is unclear.

/Johan

Sources

Alternative templates – http://www.nibble.be/?p=42
XSLT Paging Example – http://www.nibble.be/?p=11
Creative Web Starter – http://umbracocws.codeplex.com/