Using infinite scrolling w / MySQL Database
I found a nice ajax / jquery infinite scroll plugin ( http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/ ) that I was able to shape my content, but I have one problem - it only calls the loadmore.PHP script once. Let me show you the code:
In my index.php file:
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
</script>
This section calls my loadmore.php file and sends it the id of the last post. This only works the first time you scroll to the bottom of the page, it loads the entries from loadmore.php but doesn't call loadmore.php again. My loadmore.php file has the following code:
<?php
include('./includes/config.php');
if($_GET['lastid']){
$query = 'SELECT * FROM db WHERE id < "'.$_GET['lastid'].'" ORDER BY id DESC LIMIT 0,3';
$result = mysql_query($query);
while ($rec = mysql_fetch_object($result)) {
[SET MY VARS]
?>
[HTML & PHP DISPLAYING MY POST]
<?php
}
}
?>
The 3 messages that appear after the first ajax call look great, exactly how I want them to be displayed with the correct data. But I can't get the next 3 messages that appear after the first 3 appear.
So if I have 5 default messages in my index.php, I scroll to the bottom, ajax calls 3 more messages, they display fine, but nothing is displayed after that, although there are many messages left to display. Where is my problem, ajax / jquery masters?
source to share
Your "if" condition is only met on the first scroll. Basically, the event is fired, not when you scroll to the bottom of the page, but when you start scrolling. Replace the code with the following:
<script type="text/javascript">
var loading = false;
$(window).scroll(function(){
var h = $('#postswrapper').height();
var st = $(window).scrollTop();
// the following tests to check if
// 1. the scrollTop is at least at 70% of the height of the div, and
// 2. another request to the ajax is not already running and
// 3. the height of the div is at least 500.
// You may have to tweak these values to work for you.
if(st >= 0.7*h && !loading && h > 500){
loading = true;
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
loading = false;
}
});
}
});
</script>
source to share