Ajax Infinite Scroll Using jQuery, PHP and MySQL

This tutorial helps you to display more content to user without navigating to other pages. We have another great method to display more content to user without letting user to navigate to different page and it’s called Infinite scrolling. It’s good to load the content when user is at the end of page. There are various popular sites like Facebook uses this method to show news feeds to user. When you will reach the bottom of the window it will load new feeds. There are various jQuery plugin to do the job but it’s a small script so we will not use any jQuery plugin. We will write our own jQuery code to load new content on window scroll. We have used MySQL and PHP to display and store some sample data.

Let’s see how we can implement infinite scrolling. Below is our code for script.js which is responsible for all the core action. As soon as scroll bar reaches the bottom of page this little script loads more content from database by calling scroll.php file.

</p>
var ajax_arry=[];
 var ajax_index =0;
 var sctp = 100;
 $(function(){
 $('#loading').show();
 $.ajax({
 url:"scroll.php",
 type:"POST",
 data:"actionfunction=showData&page=1",
 cache: false,
 success: function(response){
 $('#loading').hide();
 $('#demoajax').html(response);

 }

 });
 $(window).scroll(function(){

 var height = $('#demoajax').height();
 var scroll_top = $(this).scrollTop();
 if(ajax_arry.length>0){
 $('#loading').hide();
 for(var i=0;i<ajax_arry.length;i++){
 ajax_arry[i].abort();
 }
 }
 var page = $('#demoajax').find('.nextpage').val();
 var isload = $('#demoajax').find('.isload').val();

 if ((($(window).scrollTop()+document.body.clientHeight)==$(window).height()) && isload=='true'){
 $('#loading').show();
 var ajaxreq = $.ajax({
 url:"scroll.php",
 type:"POST",
 data:"actionfunction=showData&page="+page,
 cache: false,
 success: function(response){
 $('#demoajax').find('.nextpage').remove();
 $('#demoajax').find('.isload').remove();
 $('#loading').hide();

 $('#demoajax').append(response);

 }

 });
 ajax_arry[ajax_index++]= ajaxreq;

 }
 return false;

 if($(window).scrollTop() == $(window).height()) {
 alert("bottom!");
 }
 });

});
<p style="text-align: justify;">

You can open db.php file and set the value of $limit to define how many rows must be loaded at once.

Let’s see our code for scroll.php:

</p>
<?php
include('db.php');

if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];

 call_user_func($actionfunction,$_REQUEST,$con,$limit);
}
function showData($data,$con,$limit){
 $page = $data['page'];
 if($page==1){
 $start = 0;
 }
 else{
 $start = ($page-1)*$limit;
 }

 $sql = "select * from infinitescroll order by id asc limit $start,$limit";
 $str='';
 $data = $con->query($sql);
 if($data!=null && $data->num_rows>0){
 while( $row = $data->fetch_array(MYSQLI_ASSOC)){
 $str.="<div class='data-container'><p>".$row['id']."</p><p>".$row['firstname']."</p><p>".$row['lastname']."</p></div>";
 }
 $str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
 }else{
 $str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>";
 }
echo $str;
}
?>
<p style="text-align: justify;">

You can download the code and set up your local database with the SQL query given in demo files. Let me know what do you think of this little script and also suggest your awesome ideas to improve the script as well as our blog.

Download Demo Files

Please follow and like us:



4 Replies to “Ajax Infinite Scroll Using jQuery, PHP and MySQL”

  1. Generally I really don’t go through document upon websites, on the other hand would like to point out that the following write-up really urged myself to have a look during along with apply it! Your current writing style is stunned myself. Appreciate it, pretty good content.

Leave a Comment

Your email address will not be published. Required fields are marked *