i am trying to code endless pagination and having a trouble
$(document).ready(function(){
function lastPostFunc()
{
$('div#lastPostsLoader').html('<div class="load"><div class="label"><font color="black"><b>Loading more...</b></font></div></div>');
$.post("cr/sc/scr.php?lastID="+$(".comment:last").attr("id"),
function(data){
if (data != "") {
$(".comment:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
});
here goes my php
$result = mysql_query('SELECT * FROM xyz ORDER BY sy DESC LIMIT 15');
while($row = mysql_fetch_object($result)) {
$i++;
echo "<div class='comment' id='" . $i. "'>";
}
and other page to grab data
$pg = $_GET['lastID'];
$i=$pg; $result = mysql_query('SELECT * FROM xyz ORDER BY sy DESC LIMIT '.$pg.',15');
while($row = mysql_fetch_object($result)) {
$i++;
echo "<div class='comment' id='" . $i . "'>";
}
Im getting a problem in getting value of comment:last
i get 15 value of comment:last after 1st time event loads
i get 15 value of comment:last after 2nd time event loads
which is problem im expecting 30
and on 3rd time event occures it gives 30
and same proccess again 30,30,40,40,50,50
instead of 30,40,50,60,70,80
i tried jquery live(), and i used $_GET cause im fetching from URL
Check to see if you are loading the function somewhere else, because the function loads and stops on mine, and the only way I can get it to mimic what you say is if I load the function again on page load, which will create two calls at the same time. Causing 1-15 and 1-15 and the last number off the page. Then on scroll it loads the function as it's supposed to and keeps on loading, just as you tell it too.
Plus, make sure you are checking that get (or even if you use a post) that goes directly into your database. That is asking for an injection.
EDIT: You should probably load full page (and past) first if you have the data. Then load the scroll function, which won't load if the page isn't full. Which is why it stopped for me.
EDIT2: This is the code I was using in case you want to see. I made a mock database, so I didn't have to match a db to test.
<?php
$scroller = 30;
if ( isset($_GET['hold']) && $_GET['hold'] == '1' ) {
$i = isset($_GET['lastID'])?(int)$_GET['lastID']:0;
$j = $i + $scroller;
//sleep(10);
while( $i < $j ) { // mimic a mysql call and spit it out.
++$i;
echo "<div class='comment' id='${i}'>${i}</div>";
}
exit;
}
?>
<html>
<head>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
// I was doing something else with this, but stripped out the code
var scroller = <?php echo $scroller;?>;
$(document).ready(function(){
function lastPostFunc()
{
// this assumes there are already comments on the page, so put a dummy comment
var last = $(".comment:last").attr("id");
$('div#lastPostsLoader').html('<div class="load"><div class="label"><font color="black"><b>Loading more...</b></font></div></div>');
$.post("<?php echo $_SERVER['PHP_SELF']; ?>?hold=1&lastID="+last,
function(data){
if ( data != "" ) {
$(".comment:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
lastPostFunc();
});
</script>
</head>
<body>
<div class="comment_container">
<div class="comment" id="0"></div>
<div id="lastPostsLoader"></div>
</div>
</body>
</html>