PHP/jQuery: Continue to Scroll

Today we are going to look at something really sweet. It’s nothing new but not yet that common so a guide and some script examples on how to implement it will come in handy. What I’m talking about is something I caught up on a developers talk on YouTube. Instead of using our normal paging style when we navigate through many entries we will use jQuery and Ajax to fetch new posts when we have scrolled down to the bottom of the page. We will append the new entries at the bottom of the page making it longer in height and it will let us scroll even further down.

Why would this be useful? First off, removing any links which makes the user wait is good, we want to interact with our website as smoothly as we can. Making it possible to see more entries when we scroll and not showing everything in the beginning helps us reduce the loading time overall. If you think of it, this scrolling technique will be almost exactly the same as our Paging Class but we will remove all paging links and when the user scrolls up s/he will see every entry displayed so we don’t need to go back and forth all the time.

What do we need to implement this? We need jQuery and just a little knowledge of PHP together with our Database Class. If you don’t have the jQuery script file you can go to www.jquery.com and get the latest version (a jQuery file is also included in the download file at the bottom of this page).

The script requires two PHP pages and your own JS file. The JS file will be written in jQuery and handle the fetching of the new entries. I will not go through every page in detail. We start with the index.php file. Don’t forget to include the jQuery and our own JS file. My jQuery script file is called global.js.

<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="global.js"></script>

In the body tag I create an instance of the Database class and connect to my database. Then I just fetch the first 10 entries from a table called ‘games’. I loop through the result with the mysql_fetch_object method. Each entry is wrapped in a div tag with a class named “entry” and a unique id which in this case is the game id.

<?php
include('Database.php');
$db = new Database('database', 'server', 'user', 'password');
$query = "SELECT * FROM games WHERE gameid LIMIT 10";
$result = $db->execQuery($query);
$i = 0;
while($rs = mysql_fetch_object($result)):
echo "<div class='entry' id='$rs->gameid'>$rs->title</div>";
$i++;
endwhile;
$db->close();
?>

So far nothing special. Basically this is the setup for the index.php file. Let’s take a look at the jQuery script file taking care of the appending of new posts to our index.php file.

$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
addMorePosts();
}
});

function addMorePosts()
{
$('div#loading').css('top', $(document).height() - $('div#loading').height() - 20).toggle();
$.post("scroll.php?action=getMorePosts&lastID=" + $(".entry:last").attr("id"),
function(data){
if(data != "") {
$(".entry:last").after(data);
}
$('div#loading').toggle();
});
};

The very first line makes it possible to to do actions when we try to scroll the main window. If we are at the bottom of the scrolling bar we will call our addMorePosts() function. This function will first display our loading div so we know what the browser is currently up to and then we just use the jQuery Ajax post method to call our other PHP page, the one fetching the new entries we are going to append to the index.php end.

We need to supply an id so we know where we are going to start our next fetch, this is done by adding an id to every entry we add in form of a div tag and then we use the smooth “:last” jQuery selection attribute to select the last div with “entry” as class. If we get a response from our scroll.php page we add the incoming data after the last div with an “entry” as class name and we hide the loading div. Next, we take a look at this in the scroll.php file:

<?php
include('Database.php');
$db = new Database('database', 'server', 'user', 'password');
$action = $_GET['action'];
if($action == 'getMorePosts') {
$lastID = $i = $_GET['lastID'];
$query = "SELECT * FROM games WHERE gameid > $lastID LIMIT 5";
$result = $db->execQuery($query);
$i++;
while($rs = mysql_fetch_object($result)):
echo "<div class='entry' id='$rs->gameid'>$rs->title</div>";
$i++;
endwhile;
}
$db->close();
?>

Again, rather straight forward. We create a Database object and see if the action type matches ‘getMorePosts’. If the action match, we fetch the last id taken from the last div tag with “entry” as class and we fetch the next 5 entries where the current gameid is larger than the last id we have on the index.php file. The code is very similar to the PHP code we have on the index.php file.

So there we have it. Rather easy huh? It’s a sweet function and you should definitely try to use it!

• Download the “continue to scroll” script