A Tutorial on How to Integrate Infinite Scroll with CakePHP

I recently had a project that involved integrating infinite scroll, also known as lazy scroll with CakePHP. I also got a private e-mail from one of my readers asking how to do this. So, after my integration was finished, I decided to write a short tutorial on how to integrate infinite scroll with CakePHP. As usual, the entire tutorial can be downloaded here. And as a bonus, I have also setup a demo page of infinite scroll and CakePHP that can be viewed here. When you’re done, you’ll be able to integrate Infinite Scroll with CakePHP like a boss!!!

The Tutorial: A Star Wars Blog With Infinite Scoll

The tutorial is based on CakePHP’s blog tutorial from the bakery. I basically have a blog containing 10 posts about Star Wars. The posts were copied directly from Wikipedia to keep things simple. I then use CakePHP’s paginator to load 2 posts at a time. You can view a demo of the tutorial here. The tutorial includes regular pagination as well as infinite scrolling. I also include the SQL queries to create the posts table and populate it with the Star Wars articles.

Step 1: Download the Infinite Scroll JavaScripts

The first thing you need to do is download the JavaScript library that will be handling the infinite scrolling. For this tutorial, I used the Infinite Scroll Plugin from Paul Irish. It is one of the most popular infinite scroll libraries out there because it is well documented and very easy to integrate. Once you have download the library, you can place it in your webroot/js folder along with a copy of the jQuery library. The plugin requires jQuery so you can either use a local version of jQuery or a version from the CDN. You will have to modify your layout files to include both JavaScript files in order for infinite scroll to work.

Step 2: Download a Spinner image

For you to have the proper effect of infinite scroll, you need to find a proper spinner animation. Our buddy Google has plenty of spinners to choose from. In the end I ended up with this spinner image: .

Step 3: Modify your CakePHP view to handle infinite scroll

This tutorial assumes that you are familiar with the Model/View/Controller interaction of CakePHP so we will skip anything related to the setup of the model and the controller. Instead, we will focus on the view. In particular the view responsible for the infinite scrolling. The file in particular is index.ctp locate in View/Posts/index.ctp. The view is separated into 3 sections:

1. The Main Section to Display Blog Posts
2. The Pagination Element
3. The Infinite Scroll Javascript

Step 3A: Modify The Main Section to Display Blog Posts

This is the main section responsible for showing your content. You must have a div element to indicate the container for each one of your individual posts. In my case, I have a div element called posts-list. You must also have a defined class name for each of the individual posts. In my case, I have a div element that wraps each element called post-item. You can look at the div with id posts-list as the main container and the post-item class as the container for each individual post. The infinite scroll library needs to know the id of these 2 elements in order to dynamically modify the content as the user scrolls down the page. The following is the code..

		<div id="posts-list" class="grid_entry row masonry" style="width:50%" > 
		
			<?php foreach($posts as $post){ ?>
			<div class="post-item">
				<h2><?php echo $this->Html->link($post['Post']['title'],
	array('controller' => 'posts', 'action' => 'view', $post['Post']['id'])); ?></h2>
				<p><?php echo $post['Post']['body']; ?></p>
				<p><?php echo $post['Post']['created']; ?></p>
				<hr/>
			</div>
			<?php } ?>
		</div>

Step 3B: Modify The Pagination Element

CakePHP allows you to create the pagination link using the function Paginator->next(). This function will create a link to the next set of posts to load. You do not have to change anything with this call. The infinite scroll library will dynamically call this link and append its content to the posts-list element. The following is the pagination code..

<?php
		echo $this->Paginator->next('Show more star wars posts...');
?>

Step 3C: Modify The Infinite Scroll Javascript

You need to modify your infinite scroll javascript to specify the DIV element names that you used in step 3A. So in my case, I specify that my itemSelector element is called .post-item and that my main container is called #posts-list. Since this is a tutorial, I also enable the debug flag so that any errors can be displayed in the console. Finally, I setup the message to display when all paging has finished and the location of my spinner.gif image that was download in Step 2.

<script>
  $(function(){
	var $container = $('#posts-list');

	$container.infinitescroll({
	  navSelector  : '.next',    // selector for the paged navigation 
	  nextSelector : '.next a',  // selector for the NEXT link (to page 2)
	  itemSelector : '.post-item',     // selector for all items you'll retrieve
	  debug		 	: true,
	  dataType	 	: 'html',
	  loading: {
		  finishedMsg: 'No more posts to load. All Hail Star Wars God!',
		  img: '<?php echo $this->webroot; ?>img/spinner.gif'
		}
	  }
	);
  });

</script>

You’re Done

That’s it! You’re done integrating infinite scroll with CakePHP! Don’t forget to modify your layout file so that you load the javascript files. In my case, I modified the default CakePHP layout to load jQuery and the infinite scroll library. That’s it. You’re now a infinite scroll with CakePHP Jedi. The entire tutorial can be downloaded here and you can view the demo page here. If you have any comments or issues, hit me up in the comments section…