Using infinite scroll w/ a MySQL Database

Question

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 mold well to my content, but I'm having one issue -- it only calls the loadmore.php script once. Let me show 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 I 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 posts that show up after the first ajax call come up perfectly, exactly the way I want them to show with the correct data. But I can't get the next 3 posts to show up after the first 3 show up.

So if I have 5 posts by default on my index.php, I scroll to the bottom, ajax calls 3 more posts, they display perfectly, but nothing displays after that even though there are plenty of posts left to display. Where's my problem, ajax/jquery wizards?

Answer 1

Would the above code example with the following mods work to trigger the function at a fixed height from the bottom??

Add:

var trigger = $('#postswrapper').height() - 250;

And change:

if (st >= 0.7*h && !loading && h > 500) {

to:

if ((st == trigger) && (!loading) && (h > 500)) {

Answer 2

Your "if" condition is only satisfied the first time you scroll. So essentially, the event is getting fired, not when you scroll to the bottom of the page, but when you start scrolling. Replace your 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>