How to make a page scroll down automatically load data from Mysql Database using PHP, jQuery
Authors: CodeToday | PHP Code | Views: 70 | 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.
2.
4.
5.
The steps are as follows:
- Create a database for storing data
- Create the
connect.phpfile to connect the database and PHP code - Generate jquery code
- Create the
load_more.phpfile to receive the retrieved data from jquery - Create an
index.phpfile to display the first data
1. Create a database
This database will contain titles and summaries of the articles in the
title and short fieldsDROP 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: