Question

I am trying to construct an AJAX-based infinite scroller with jQuery, PHP & mySQL.

Pretty straightforward, there is a div in a primary page holding regular content (#theContent). When the window is scrolled to the bottom, a call is automatically made to an external PHP page (articles.php) which queries a mySQL database, then appends that new PHP content to the end of div#theContent in the primary page. This will last as long as there is new content in the recordset, using a passed offset variable from the primary to the external page.

I have it partly working, but could use some advice on the offset. In the code snippet below (from the primary page) you’ll see “articles.php?offset=10” – I want to increment the “offset” value each time the page is appended (when it scrolls to the bottom), so that the offset value is updated each time the .append(data) is called. This is where I am stuck.

In the head of the primary page (this scroll works, and the initial call to the database executes):

<script>
$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {

    $.get('articles.php?offset=10', function(data) {
        $('#theContent').append(data);
    });


       }
});
</script>

in articles.php (works by itself)

$offset = $_GET["offset"]; // gets from primary page  

the SQL call:
    "Select blah from blah order by blah limit 50,$offset";

So to sum up: how do I increment the offset variable in the primary page each time the .append is called?

Thanks for reading.

---

EDIT: I edited the snippet fr Ohgodwhy, moving the offset incrementer outside the $.get. Great – now the looping the same records problem is gone. Edits made:

 var offset = 10;
$(window).scroll(function () {

    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 200) {

        $.get('articles.php?offset='+offset, function(data) {
            $('#theContent').append(data);

        });

  offset += 10;
        }
});

Answer 1

var offset = 10;
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {

        $.get('articles.php?offset='+offset, function(data) {
            $('#theContent').append(data);
            offset += 10;
        });


        }
});