Php Mysql Ajax Infinite Scrolling

Question

I am using the code bellow to make an infinite scrolling but I got 2 "errors". 1. When it reaches the last record it displays the next 4 records again 2. When it comes to the end and display all the records I didn't get the message "No More Records"

in my php file I got this:

<script type="text/javascript">
$(document).ready(function(){

   $(window).scroll(function() {

    if (  document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight )
    {           


    $("#myloaderias").fadeIn("fast");       

    $.ajax({ //START OF AJAX CALL
    url: "loadmore.php?lastComment=" + $(".imgholder:last").attr("id"),
    cache: false,
    success: function(html){            

        $("#myloaderias").fadeOut("fast");

        if(html){ //IF(HTML)
            $("#masterdivholder").append(html); //APPEND RESULTS IN THE DIV THAT HOLDS ALL THE IMAGES   
            $("#nmc").hide();   
        } else {    
            $("#nmc").fadeIn("fast'");
        }   //END IF(HTML)

    }//END SUCCESS FUNCTION 
    });//END OF AJAX CALL


    }   //END OF CHECK IF YOU ARE AT THE BOTTOM OF THE PAGE     
    }); //END OF (window).scroll(function(){


});
</script>

<div id="myloaderias" style="display:none;"><img src="images/ajax-loader.gif"></div>

<div id="loadMoreComments">
<div style="clear:both;"></div>
</div>

<div id="nmc">No More Results</div>

and the php code to retrieve the data in inde.php:

<?php

require "connectiondb.php";

$active = "1";
$mysql_query = mysql_query ("SELECT * FROM gallery WHERE active = '$active' ORDER BY id DESC LIMIT 0,30");
while($pic = mysql_fetch_assoc($mysql_query)) {

echo'   
<div class="imgholder" id="'.$pic['id'].'">
<div class="imgcaption">'.$pic['imgtitle'].'</div>
<div class="imgclass">
<a href="www"><img src="'.$pic['thumbpath'].'" width="210" height="140" alt="'.$pic['imgtitle'].'" style="-moz-border-radius: 6px; -webkit-border-radius: 6px;" border="0"/></a>
</div>
<div id="sharebox">
<div style="width:210px; height:32px; float: left; margin-top:3px;">
<div id="socialbox1"><a href="'.$pic['id'].'"><img src="socialicons/facebook.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/twitter.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/google.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/youtube.png" width="32" height="32" border="0" /></a></div>
</div>
</div>
</div>';
}
?>

In the next file loadmore.php:

<?php
require "connectiondb.php";


if($_GET['lastComment']){

$lastcomment = $_GET['lastComment'];

$myquery = mysql_query ("SELECT * FROM gallery WHERE id < '$lastcomment' ORDER BY id DESC LIMIT 0,5");
while($pics = mysql_fetch_assoc($myquery)) {

echo'   
<div class="imgholder" id="'.$pics['id'].'">
<div class="imgcaption">'.$pics['imgtitle'].'</div>
<div class="imgclass">
<a href="www"><img src="'.$pics['thumbpath'].'" width="210" alt="'.$pics['imgtitle'].'" border="0" /></a>
</div>
<div id="sharebox">
<div style="width:210px; height:32px; float: left; margin-top:3px;">
<div id="socialbox1"><a href="'.$pics['id'].'"><img src="socialicons/facebook.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/twitter.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/google.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/youtube.png" width="32" height="32" border="0" /></a></div>
</div>
</div>
</div>';
}

}
?>

Thanks to all!

Answer 1

Try adding async: false to ajax call. That will fix the sinhronization problem.

The other solution is more complex, but you need to wait for a next set of records before performing next ajax call.