Infinite Scroll in PHP Using Jquery AJAX and MySQL

Infinite Scroll of Webpage in PHP

In this tutorial here we are going to show how to infinite scroll a Page like facebook. In our previous tutorial , we have seen how to load more data onclick of button.

To display more content without clicking on button , only by scrolling like facebook is going to show how is it possible with Jquery and ajax.

This is the way by which we can load more content on same page without navigating to pagination link for more data display.

Let us see the tutorial how to create infinite scroll for webpage in PHP in below code snippet.

First of all create infinite-scroll folder in your root folder of www or htdocs. Create two file which is index,php and get_moredata.php. Here we sending the request for more data using ajax with jquery. As usual for working of javascript here we are including jquery.js library file.

Let us see in details.

Config.php

mysql_connect("localhost","root","");
mysql_select_db("test");

Here we are checkinh that when a user is at the bottom of window then we call getmoredata() function to load next content on page by sending request via ajax.

Index.php

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){

    $(window).scroll(function (){
  
   //check if the users are at bottom of the window
   //scroll to returns 0
     
	 if ($(window).scrollTop() + $(window).height() >= $(document).height())
   {
    getmoredata();
   }
    });

    function getmoredata()
    {
    var ids= $('.vikash:last').attr("id");
    
      $.ajax({
      type: 'post',
	  asynch: false,
      url: 'get_moredata.php',
	  cache: false,
      data: {
       getdata:ids
      },
      success: function (response) {
    //appending the result get_moredata page result with div id alldata
  $('#alldata').append(response);
      }
      });
    }
	});
</script>


<div class="row" id="alldata">
<?php
Include(‘config.php’);

$sql= mysql_query("select * from `courses` ORDER BY `course_id` DESC LIMIT 5");
while($rows=mysql_fetch_array($sql))
{?>
<div class="vikash" id="<?php echo  $rows['course_id'];?>"><?php
echo $rows['course_id']."<br><br><br><br>";
echo $rows['course_name']."<br><br><br><br>";
?>
</div>
<?php
}?>

</div>

Get_moredata.php

<div class="row" >
<?php 
Include(‘config.php’);
_select_db('phpclust_demo', $connection);

if(isset($_POST['getdata']))  {
 
$lim=$_POST['getdata']; 
 
$sql= mysql_query("select * from `courses`WHERE `course_id`<'$lim' ORDER BY `course_id` DESC limit 10");

while($rows=mysql_fetch_array($sql))
{?>
<div class="vikash" id="<?php echo  $rows['course_id'];?>"><?php
echo $rows['course_id']."<br><br><br><br>";
echo $rows['course_name']."<br><br><br><br>";
?>
</div>
<?php
}}?>
</div>

CSS

.vikash{
width:700px;
height:150px;
background-color:pink;
border:1px solid #000;
margin-left:150px;
margin-right:150px;
}
#datarow{
width:700px;
height:150px;
background-color:pink;
border:1px solid #000;
margin-left:150px;
margin-right:150px;
}

Demo