I want to use on scroll infinite loop for my WordPress website. I found following code on some websites, It works great on static PHP pages. But now I want to add this functionality in my WordPress blog, but I don’t know how…
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Loading Records</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<?php
include("config.php");
$results = $mysqli->query("SELECT COUNT(*) as t_records FROM paginate");
$total_records = $results->fetch_object();
$total_groups = ceil($total_records->t_records/$items_per_group);
$results->close();
?>
<script type="text/javascript">
$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading = false; //to prevents multipal ajax loads
var total_groups = <?php echo $total_groups; ?>; //total record group(s)
$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group
$(window).scroll(function() { //detect page scroll
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
if(track_load < total_groups && loading==false) //there's more data to load
{
loading = true; //prevent further ajax loading
$('.animation_image').show(); //show loading image
//load data from the server using a HTTP POST request
$.post('autoload_process.php',{'group_no': track_load}, function(data){
$("#results").append(data); //append received data into the element
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_load++; //loaded group increment
loading = false;
}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
alert(thrownError); //alert with HTTP error
$('.animation_image').hide(); //hide loading image
loading = false;
});
}
}
});
});
</script>
</head>
<body>
<ol id="results">
</ol>
<div class="animation_image" align="center"><img src="ajax-loader.gif"></div>
</body>
</html>
autoload.php
<?php
include("config.php"); //include config file
if($_POST)
{
//sanitize post value
$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if group number is not valid
if(!is_numeric($group_number)){
header('HTTP/1.1 500 Invalid number!');
exit();
}
//get current starting point of records
$position = ($group_number * $items_per_group);
//Limit our results within a specified range.
$results = $mysqli->query("SELECT id,name,message FROM paginate ORDER BY id ASC LIMIT $position, $items_per_group");
if ($results) {
//output results from database
while($obj = $results->fetch_object())
{
echo '<li id="item_'.$obj->id.'">'.$obj->id.' - <strong>'.$obj->name.'</strong></span> — <span class="page_message">'.$obj->message.'</span></li>';
}
}
unset($obj);
$mysqli->close();
}
?>
I try to add it using $wpdb function of wordpress but no luck. How to show data from database in wordpress? Here I asked how to add that index.php code in database. Using their answers I try to find out the way but I don’t get any result. using var_dump($result); I got following output.
array (size=1) 0 =>
object(stdClass)[3661] public 't_records' => string '1257' (length=4)
Please help me to find out how to do this.
