Infinite page scroll function with Mysql not working
Question
I am getting data from mysql but page scroll is not working.
It is just displaying 10 results(1-10), and if i scroll down not getting any results.
This is my load.php file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="load_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).scroll(function ()
{
if($(body).height() <= $(window).scrollTop() + $(window).height())
{
loadmore();
}
});
function loadmore()
{
var val = document.getElementById("row_no").value;
$.ajax({
type: 'post',
url: 'get_resultts.php',
data: {
getresult:val
},
success: function (response) {
var content = document.getElementById("all_rows");
content.innerHTML = content.innerHTML+response;
// We increase the value by 10 because we limit the results by 10
document.getElementById("row_no").value = Number(val)+10;
}
});
}
</script>
</head>
<body>
<h1>Load Results From Database On Page Scroll Using jQuery,Ajax And PHP</h1>
<div id="all_rows">
<?php
$db = mysqli_connect("localhost", "root", "", "text");
$sql="select text from text limit 0,10";
$select = mysqli_query($db, $sql);
while($row=mysqli_fetch_array($select))
{
echo "<p class='rows'>".$row['text']."</p>";
}
?>
</div>
<input type="hidden" id="row_no" value="10">
</body>
</html>
This is get_resultts.php
<?php
if(isset($_POST['getresult']))
{
$db = mysqli_connect("localhost", "root", "", "text");
$no = $_POST['getresult'];
$sql = "select text from text limit $no,10";
$select = mysqli_query($db, $sql);
while($row = mysqli_fetch_array($select))
{
echo "<p class='rows'>".$row['text']."</p>";
}
exit();
}
?>
Any Hint/help is appreciated.
1 answers
solution1
0 2017-03-05 23:41:44
You have a few problems here. The first is that you're not referring to the body tag correctly -- you should use :
$("body")...
and not $(body) as you've done in your script.
The second problem is that it's possible that the content won't fill the space available -- if the content isn't high enough to scroll, then your scroll event will never fire, so even once the body tag is corrected, the event may never try to fire. You could easily put in place some kind of loop in the document ready event:
$(document).ready(function() {
... (repeat similar check until content fills space) ...
}
The last problem is that, in response to the scroll, you could easily get multiple triggers of the loadmore() function. This would lead to your page triggering multiple parallel ajax requests with an identical row-number, and you'd get a large number of repeated requests appearing in sequence.
To prevent that, you should try to only have one such ajax query running at any time. There are multiple ways of doing this, but one approach is to track the number of active Ajax queries you have open, and only proceed if the previous queries have completed. For example:
var countAjax = 0;
function loadMore() {
if (countAjax>0) return;
$.ajax({
beforeSend: function() {
countAjax++;
},
... (other settings) ...
success: function(response) {
countAjax--;
... (other success events) ...
},
error: function() {
countAjax--;
... (other error events) ...
}
});
}
By doing this, you ensure that the page is only ever executing one ajax request at a time, rather than multiple ones in parallel -- the query must either complete successfully or trigger an error for the counter to be decremented back to zero again, and won't try another query until that has happened.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.