Question

I have the code below to find the next sequential page number and load it at the bottom of the page once the user hits the bottom of the screen.

the loading div slides down and as it is loading and up once it is done… it is set to “display:none” by default

What i need is a line of code in there which basically hides the #loading div if no more pages can be found to load… ” var url = “page”+nextpage+”.html”;” finds the new page… titled ‘page 2.html, page3.html’ and so on.

Any help would be appreciated. I’m assuming it is easy but I can’t find a solution anywhere…

alreadyloading = false;
nextpage = 2;

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
    if (alreadyloading == false) {
        $("#loading").slideDown();
        var url = "page"+nextpage+".html";
        alreadyloading = true;

        $.post(url, function(data) {
            $('#newcontent').children().last().after(data);
            alreadyloading = false;
            nextpage++;
            $("#loading").slideUp();
        });

    }
}
});

Answer 1

If there is no such file then the AJAX request will fail, so you can do what you need from inside a “failure” handler. To be able to specify that, you one solution is to move from using $.post to using the more configurable $.ajax, which gives you all the necessary options:

$.ajax({
    type: 'POST',
    url: url,
    success: function(data) {
        $('#newcontent').children().last().after(data);
        nextpage++;
    },
    complete: function() {
        alreadyloading = false;
        $("#loading").slideUp();
    }
});

The complete callback contains code which will be executed no matter what happens with the request; the success callback will be executed before complete, but only if the request was successful.