javascript - Php Mysql Ajax Infinite Scrolling -
i using code bellow make infinite scrolling got 2 "errors". 1. when reaches last record displays next 4 records again 2. when comes end , display records didn't message "no more records"
in php file 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 div holds images $("#nmc").hide(); } else { $("#nmc").fadein("fast'"); } //end if(html) }//end success function });//end of ajax call } //end of check if @ bottom of 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 php code retrieve data in inde.php:
<?php require "connectiondb.php"; $active = "1"; $mysql_query = mysql_query ("select * gallery active = '$active' order 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 next file loadmore.php:
<?php require "connectiondb.php"; if($_get['lastcomment']){ $lastcomment = $_get['lastcomment']; $myquery = mysql_query ("select * gallery id < '$lastcomment' order 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 all!
try adding async: false ajax call. fix sinhronization problem.
the other solution more complex, need wait next set of records before performing next ajax call.
Comments
Post a Comment