Question

Im trying to implement an infinite scrolling feature in a website. Theres a div ‘#books’ with multiple divs ‘.book’ in it. So far this is working fine:

alreadyloading = false;
nextpage = 1;

$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
    if (alreadyloading == false) {
        var url = "page"+nextpage+".html";
        alreadyloading = true;
        $('#books').append($('#loadinggif').fadeIn(200));
        $.post(url, function(data) {
            $('#books').append(data);
            alreadyloading = false;
            nextpage++;
            $('#loadinggif').fadeOut(200);
        });
    }
}
});

However, the #lodinggif stays at the bottom even after all content is loaded. Any way I can
detect that pagex.html doesnt exist and then hide #loadinggif ?

Answer 1

If you read the docs for jQuery.post(), it says this about the callback:

success(data, textStatus, jqXHR)
A callback function that is executed if the request succeeds.

So you can’t catch error conditions with $.post. But you can catch them by using the long-form jQuery.ajax() instead of the post shorthand:

$.ajax({
    url: url,
    type: 'post',
    success: function(data, textStatus, jqXHR) {
        $('#books').append(data);
        nextpage++;
        alreadyloading = false;
        $('#loadinggif').fadeOut(200);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alreadyloading = false;
        $('#loadinggif').fadeOut(200);
    }
});