How to make a page scroll down automatically load data from Mysql Database using PHP, jQuery

Authors: CodeToday | PHP Code | Views: 192 | Posted: 03 AM: 10/04/2017

In this article I will guide you to create a page scroll down automatically. The purpose is to create a page that loads data from the databse automatically when scrolling down, so there's no need to create pagination for the data to show. But its minus point is that the search engines will have trouble crawling the data because the data is passed through jquery.

The steps are as follows:
  1. Create a database for storing data
  2. Create the connect.php file to connect the database and PHP code
  3. Generate jquery code
  4. Create the load_more.php file to receive the retrieved data from jquery
  5. Create an index.php file to display the first data

1. Create a database

This database will contain titles and summaries of the articles in the title and short fields

DROP TABLE IF EXISTS `load_more`;
CREATE TABLE `load_more` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) collate utf8_unicode_ci default NULL,
  `short` text collate utf8_unicode_ci,
  `status` enum('false','true') collate utf8_unicode_ci default 'true',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

2. connect.php

<?
mysql_connect("localhost", "root", "admin") or die("Could not connect"); 
mysql_select_db("code") or die("Could not select database"); 
?>

Here I put username = root, password = admin. You must adjust the connection parameters to suit your system

3. Jquery code

<script type="text/javascript">
$(window).scroll(function () {
	if($(document).height() <= $(window).scrollTop() + $(window).height())	  {
		load_more();
	}
});
function load_more()  {
	var val = document.getElementById("next_content").value;
    $.ajax({
		type: 'post',
		url: 'load_more.php',
		data: {
				page:val
		},
    success: function (response) {
		var content = document.getElementById("first_content");
		content.innerHTML = content.innerHTML+response;
		document.getElementById("next_content").value = Number(val)+2;
    }
    });
}
</script>

4. load_more.php

<?php
include 'connect.php';
$page = $_POST['page'];
if(isset($page )) {
    
$sql = mysql_query("SELECT title, short FROM load_more LIMIT $page,2");
while($row = mysql_fetch_array($sql))    {
	
	echo "<h3 class='text-primary'>".$row['title']."</h3>";
	echo '<p>'.$row['short'].'</p>';
		
} mysql_free_result($sql);
}  
?>

5. index.php

<?
include 'connect.php';
echo '<div id="first_content">';
$sql = mysql_query("SELECT title, short FROM load_more LIMIT 0,5");
while($row = mysql_fetch_array($sql)){
	
  	echo "<h3 class='text-primary'>".$row['title']."</h3>";
	echo '<p>'.$row['short'].'</p>';
		
} mysql_free_result($sql);
echo '</div>';
echo '<input type="hidden" id="next_content" value="5">';
?>

After completing the above steps you will see the results as shown below:

How to make a page scroll down automatically load data from Mysql Database using PHP, jQuery


If you have any questions, please leave a message below