Create a Twitter-Like "Load More" Widget

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

Assumptions

There are a few assumptions and notes that we're going into this system with:

The server needs to be running PHP5 so that we can use PHP5's JSON functions.

We'll be pulling database records from a WordPress "posts" MySQL table. What's great about the code provided is that you may use it with any database system; all you'll need to do is modify the MySQL query and the JSON properties used by jQuery or MooTools.

This tutorial will feature an explanation of the MooTools javascript. While jQuery's
syntax differs from MooTools, the beauty in modern javascript frameworks is that
they differ mainly in syntax, not in logic. The jQuery javascript will be provided below.

The Plot

Here's the sequence of events that will take place in our slick widget:

The page loads normally with an initial amount of posts showing

The user clicks the "Load More" element at the bottom of the list

An AJAX/JSON request will fire, retrieving a specified amount of new posts

Our jQuery/MooTools javascript will receive the result and build a series of new HTML elements containing the JSON's information

Each element will slide into the widget's container element

Once all of the elements have been loaded into the page, the window will scroll down to the first new item

Rinse and repeat.

Step One: The PHP/MySQL

The first step is deciding how many posts need to be loaded during the initial page load. Since our widget will remember how many posts were loaded during the last load (in case a user visits another page and comes back), we'll need to use the session.

The above code snippet contains all the "settings" content that we need. Next we need to create a PHP function that connects to our database, grabs more records, and returns their contents in JSON format:

The above PHP contains a very simple regular expression that grabs the first paragraph of my post's content. Since the first paragraph of most blog posts serves as a introduction to the rest of the content, we can assume that paragraph will server as a nice preview of the post.

Once the above function is ready, we need to create our AJAX request listener. We'll know that someone has sent an AJAX request if the $_GET['start'] variable is set in the request URL.
If a request is sensed, we grab 5 more posts via our get_posts() function and echo their JSON out. Once we've output the new posts in JSON format, we save the number of items that the user has requested and kill the script, as seen below.

Step 2: The HTML

There's not much raw HTML to this widget initially. We'll create one main widget container. Inside the widget container will be a posts wrapper and our "Load More" element which will server as a virtual like to trigger the loading of more content.

Step 3: The CSS

Time to add some flare to our widget. Feel free to format the widget's elements any way you'd like. I've chosen to add my caricature on the left and the post title, content, and link to the right. We'll need to add CSS for the static HTML elements and the javascript-generated elements as show below.

Once the DOM is ready, we provide the initial javascript settings. Note that one of those settings, initialPosts, contains the JSON for the first batch of posts that should show when the page loads. We also define variables for how many posts we load initially and the number of posts to grab during each AJAX request.

Add an onSuccess parameter that resets the "Load More" element text, keeps track of the current start spot for grabbing future elements, and handle the JSON response the same way we did with the initial posts...

The MooTools and jQuery versions are exactly the same logic with different syntax!

Mission Accomplished!

Implementing this widget on your website is a great way to add dynamism and creativity to your website. I look forward to seeing your widget! Have questions suggestions for improvements? Post them below!

David Walsh is an eccentric programmer that finds a way to make things work. His expertise is in CSS, PHP, and MooTools javascript. You can read his ramblings at the David Walsh Blog (http://davidwalsh.name)