How to create infinite scroll with ajax on jQuery

Nowadays almost every page with dynamic news use infinite scroll, Twitter, Facebook and Pinterest are the main references for this.

It’s very practical when you have unstructured information, timed and loaded dynamically. Gives the sensation to the user that the information never ends, but also you can have some troubles if the user wants to have indented information, so be careful not always is the best choice for your user experience.

You can use some jQuery plugins, like paulrish / infinite scroll plugin ( https://github.com/paulirish/infinite-scroll ) or jScroll ( http://jscroll.com/ ). If you are those who want to do it themselves, just follow these steps to start from scratch your own jQuery infinite scroll piece of work.

If you want to make it yourself here you’ve a starting point, create a function to check if the last element of your list is on the current scroll position:

function element_in_scroll(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Now we need to setup the scroll event ( http://api.jquery.com/scroll/ ) and check if the element we want to trigger the ajax request is visible to the user:

$(document).scroll(function(e){
	//...
});

Inside of this event, call the element_in_scroll function and use the selector ( http://api.jquery.com/selector/ ) you want, in this case I’m using an html table

<table class="errors">
    <tbody>
        <tr>
            <td><span class="label label-error" >ERROR</span></td>
            <td class="collapse"><span class="label label-warning" >Warning</span></td>
            <td class="collapse">example error</td>
            <td class="date collapse">2013-05-26 23:54:19</td>
        </tr>
    </tbody>
</table>

So for this html you need to use this jQuery selector:

$(document).scroll(function(e){
	if (element_in_scroll(".errors tbody tr:last")) {
			//Here you must do what you need to achieve the infinite scroll effect...
		};
});

I’ve used an ajax request to perform the infinite scroll completion, here’s the complete scroll event call with the ajax request:

$(document).scroll(function(e){
	if (element_in_scroll(".errors tbody tr:last")) {
			$(document).unbind('scroll');
			$.ajax({
				type: "POST",
				url: document.location.href,
				data: { text_filter:  $('#text_filter').attr('value'), index_count:$('#index_count').attr('value'),json: "true" }
			}).done(function( msg ) {
				$(".errors tbody ").append(msg.html);
				$('#index_count').attr('value',msg.index_count);
				if (msg.count != 0) {
					$(document).scroll(function(e){
						//callback to the method to check if the user scrolled to the last element of your list/feed 
					})
				}
			});
		};
});

The data attributes are the references to know what page is needed, you can also use a timestamp depending on how are you saving your information. When msg.count is equal to zero, the scroll event is disabled.

Related links: