Get next set of data for jquery ajax autoscroll - php

Question

I'm trying to set up a custom infinite scroll with jQuery and some Ajax. This is what I have so far:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$.ajax({
type: "POST",
url: "posts/view/",
data: "",
success: function(results){
$(".container").after(results);
}
})
}
});
It all works fine and dandy, but what I'm struggling to visualize is how to get the next "set" or, "page" of data. I'm using PHP and in my function I'll have something like getMore($page = 1). But how can I have jQuery keep track of what page it's currently on, and know which page is next? Should I set up some sort of increment function inside of jQuery so that it pulls the URL (e.g. posts/page/1/) and then simply add 1 to the url it passes via Ajax?
I feel like I'm really overthinking this, is there an easier way?

Answer 1

Just use a page counter inside the scroll closure:
(function(){
//inner functions will be aware of this
var currentPage = 0;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$.ajax({
type: "GET",
url: "posts/view/" + currentPage,
data: "",
success: function(results){
$(".container").after(results);
}
})
currentPage++;
}
});
})();​
And change your server script according to the page param you are passing.
If there is nothing more to retrieve, just answer with an empty body.
By the way, POST is not suitable for retreiving data, use GET instead.

Answer 2

You can go for simpler way.
Put one hidden field like this
<input type hidden value="1" id="page" />
now before every ajax send take the pagevalue from that hidden field. And after every ajax success function increment the hidden fierld value like this.
$('#page').val(parseInt($('#page').val())+1)
Your ajax call will look like this
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$.ajax({
type: "POST",
url: "posts/view/"+$('#page').val(),
data: "",
success: function(results){
$('#page').val(parseInt($('#page').val())+1);
$(".container").after(results);
}
})
}
});