Load Content on Page Scroll with jQuery and AJAX

The infinite page scroll you have seen on the social networking sites – Facebook, Twitter or on e-commerce websites where the new content is automatically loaded when scrolling down to the web page.

For implementing this functionality I am jQuery to detect page scroll when the user reaches the end of the web page then send an AJAX request to load new content.

Download

---

Contents

1. Table structure
2. Configuration
3. HTML & PHP
4. PHP
5. jQuery
6. CSS
7. Demo
8. Conclusion

---

1. Table structure

I am using posts table.

CREATE TABLE `posts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `description` text NOT NULL,
  `link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

---

2. Configuration

Create a new config.php file.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

---

3. HTML & PHP

I set the number of rows to fetch at a time to 3 ($rowperpage=3).

Count the total number of rows and fetch first 3 records from MySQL Database table and create a layout.

Created two hidden fields –

• The <input id='row'> store current row position.
• The <input id='allcount'> store total number of rows.

Using both values when sending AJAX request from jQuery.

Completed Code

<div class="container">

<?php

 include "config.php";

 // Row per page
 $rowperpage = 3;

 // counting total number of posts
 $allcount_query = "SELECT count(*) as allcount FROM posts";
 $allcount_result = mysqli_query($con,$allcount_query);
 $allcount_fetch = mysqli_fetch_array($allcount_result);
 $allcount = $allcount_fetch['allcount'];

 // select first 3 posts
 $query = "select * from posts order by id asc limit 0,$rowperpage ";
 $result = mysqli_query($con,$query);

 while($row = mysqli_fetch_array($result)){

  $id = $row['id'];
  $title = $row['title'];
  $content = $row['description'];
  $shortcontent = substr($content, 0, 160)."...";
  $link = $row['link'];
 ?>

  <div class="post" id="post_<?php echo $id; ?>">
   <h1><?php echo $title; ?></h1>
   <p>
   <?php echo $shortcontent; ?>
   </p>
   <a href="'.$link.'" target="_blank" class="more">More</a>
  </div>

 <?php
 }
 ?>

 <input type="hidden" id="row" value="0">
 <input type="hidden" id="all" value="<?php echo $allcount; ?>">

</div>

---

4. PHP

Create a new fetch_data.php file. Using this file when sending AJAX request from jQuery.

From here fetch next 3 records from MySQL database table according to $_POST['row'] value.

Return a HTML string.

Completed Code

<?php

// configuration
include 'config.php';

$row = $_POST['row'];
$rowperpage = 3;

// selecting posts
$query = 'SELECT * FROM posts limit '.$row.','.$rowperpage;

$result = mysqli_query($con,$query);

$html = '';

while($row = mysqli_fetch_array($result)){
 $id = $row['id'];
 $title = $row['title'];
 $content = $row['description'];
 $shortcontent = substr($content, 0, 160)."...";
 $link = $row['link'];
 // Creating HTML structure
 $html .= '<div id="post_'.$id.'" class="post">';
 $html .= '<h1>'.$title.'</h1>';
 $html .= '<p>'.$shortcontent.'</p>';
 $html .= '<a href="'.$link.'" target="_blank" class="more">More</a>';
 $html .= '</div>';

}

echo $html;

---

5. CSS

.container{
 width: 55%;
 margin: 0 auto;
 border: 0px solid black;
 padding: 10px 0px;
}

/* post */
.post{
 width: 97%;
 min-height: 200px;
 padding: 5px;
 border: 1px solid gray;
 margin-bottom: 15px;
}

.post h1{
 letter-spacing: 1px;
 font-weight: normal;
 font-family: sans-serif;
}


.post p{
 letter-spacing: 1px;
 text-overflow: ellipsis;
 line-height: 25px;
}

/* more link */
.more{
 color: blue;
 text-decoration: none;
 letter-spacing: 1px;
 font-size: 16px;
}

---

6. jQuery

Add scroll event handler on the window to detect page scroll.

For finding whether scrollbar reaches to bottom or not using following method return value –

• $(window).scrollTop() – This gives number of pixels the user has scroll the webpage.
• $(document).height() – Return height of browser viewport.
• $(window).height() – Return height of HTML document.

To get the number of pixel to bottom subtract $(document).height() - $(window).height().

var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();

If position == bottom then finds next row value and if it is not greater than allcountvalue then send AJAX request where pass row value as data and on successful callback append response.

Completed Code

$(document).ready(function(){
 
 $(window).scroll(function(){
 
  var position = $(window).scrollTop();
  var bottom = $(document).height() - $(window).height();

  if( position == bottom ){

   var row = Number($('#row').val());
   var allcount = Number($('#all').val());
   var rowperpage = 3;
   row = row + rowperpage;

   if(row <= allcount){
    $('#row').val(row);
    $.ajax({
     url: 'fetch_details.php',
     type: 'post',
     data: {row:row},
     success: function(response){
      $(".post:last").after(response).show().fadeIn("slow");
     }
    });
   }
  }

 });
 
});

---

7. Demo

Scroll the page. Open in new tab.

---

8. Conclusion

This is another type of pagination where the user doesn’t have to press any key or a button to load new content.

It will automatically load up content whenever the user reaches the bottom of the web page while page scroll.


Sumber: http://makitweb.com/load-content-on-page-scroll-with-jquery-and-ajax/