Paginated MovableType Entry Listing with Ajax
Here is a way to display a paginated list of movable type blog entries using Ajax. Take a look at the sidebar on the home page of this site. You will notice that it includes a list of entries (most recent first). After these entries there is a link to browse older entries. I reworked my blog this morning to build a paginated view of past entries using Ajax. The link for older entries fetches older entries and updates the page. Read on for more details.
Requirements
Here is the list of things you need to download and install for adding this feature to any MovableType blog.
- PHP Support: Your blog needs to support PHP for this to work.
- Rico Ajax: Any Ajax library would probably do, but I relied on this library for Ajax support. Install Rico and any others scripts Rico requires on your site.
- MTPaginate Plugin: Download and install the MTPaginate pluin. We will use this plugin below to generated paginated listing of entries.
I verified these steps with MovableType 3.2. Your mileage may vary with older versions.
Step 1. Fix MTPaginate.pl
I noticed that some MTPaginate tags add s in their output making the generated XML invalid. So, the first step is to fix this.
Open MTPaginate.pl, and look for the following line.
my $format = decode_html($args->{format}) || " %d ";
Remove those s from this line. The changed line should look like the one below.
my $format = decode_html($args->{format}) || "%d";
Step 2: Add a New MovableType Template
The next step is to add a new MovableType template in your blog. This template generates the XML response for the Ajax script.
Here is the content of this template.
<?php
header('Content-type: text/xml');
?>
<ajax-response>
<response type="element" id="entryPage">
<div class="entries">
<MTPaginate>
<ul>
<MTPaginateContent max_sections="10">
<MTEntries>
<span class="entry_link"><li><a href="<$MTEntryPermalink
valid_html="1"$>"><$MTEntryTitle$></a></li></span>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<li>
<div class="sbPageNav">
<MTPaginateIfPreviousPage_>
<a href="javascript:getEntryPage('<$MTPaginatePreviousPage$>')"
class="rnavLink">Newer</a></MTPaginateIfPreviousPage_>
<a href="/entries.php">All</a>
<MTPaginateIfNextPage_>
<a href="javascript:getEntryPage('<$MTPaginateNextPage$>')"
class="rnavLink">Older</a></MTPaginateIfNextPage_>
</div>
</li>
</MTPaginateIfMultiplePages>
</ul>
</MTPaginate>
</div>
</response>
</ajax-response>
For this template, enter the output file name with a .php extension, and select the check box that says “Rebuild this template automatically when rebuilding index templates”. I used sb_entries.php as the output file name. You will need to use this file name in the next step below. Then save and build the template.
To verify that this template is working correctly, hit the .php file directly from your browser. This should generate a valid XML page without any parse errors. If there are parse errors, fix them first before proceeding further.
Step 3: Update Index Template
You will need to make a number of changes for your index template to add a paginated listing of blog entries.
Import the Script
In the <head> section of your index template, add the following script imports.
<script src="prototype.js"></script>
<script src="rico.js"></script>
<script>
ajaxEngine.registerRequest( 'getEntryPage', 'sb_entries.php' );
</script>
<script>
ajaxEngine.registerAjaxElement('entryPage');
</script>
<script>
function getEntryPage(page) {
ajaxEngine.registerAjaxElement('entryPage');
ajaxEngine.sendRequest('getEntryPage', "page=" + page);
}
</script>
In this script, the second argument to the registerRequest function must be the name of the php template added in Step 2 above.
Also, update the <body> tag to display the first page of entries during its onload.
<body onload="javascript:getEntryPage('1')">
Add a Div Tag to List Entries
The last step is to add a div tag to display entry list in the sidebar of your index template.
<div style="display:inline" id="entryPage"> Downloading list of recent entries... </div>
Step 4: Add Styles
Add whatever styles you like for the entry list.
That’s it. Happy pagination.
