Check if a dynamically url exists within an ajax function

Question

I am using a script that auto loads blog posts on scroll by parsing the posts from the "blogurl.com/page/#" urls that the pages are set to.

I am working with a test blog and currently I have 2 pages of test posts.

When I scroll down to a point the posts from page 2 load and parse to the container. I don't have any posts on page 3, so page 3 doesn't exist (i.e. blogurl.com/page/3 is not a real url). This script however only checks if there are posts on a url, not if the url itself actually exists.

(function($) {
    $.fn.swoosh = function(loadingImgUrl, callback) {
        if (!loadingImgUrl) {
            loadingImgUrl = "Loading...";
        }
        if (callback == null) {
            callback = -1;
        }
        var postList = this;

        var turnOff = false;
        var pageNumber = 2; 
        var urlArray = window.location.href.toString().split("/");
        var blogUrl = urlArray[0] + "//" + urlArray[2] + "/" + urlArray[3] + "/";
        var baseUrl = blogUrl + "page/";
        var postUrl = "";                                                 
        var processing = false;

        //insert the loading bar at the end of the posts-list
        if (loadingImgUrl != "Loading...") {
            postList.parent().append('<div class="loading"><img src="' + loadingImgUrl + '"></div>');
        } else {
            postList.parent().append('<div class="loading">' + loadingImgUrl + '</div>');
        }
        $(".loading").hide(); //make sure loading bar is hidden

        $(document).scroll(function() {

            //kick out of function if it's already running, if it has been shut off, or if there is no 2nd page
            if (processing || turnOff || pageNumber == 0) {
                return false;
            }
            //when scrolling gets to the footer, start chugging!
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - $(".blog_footer").height() - 150) {
                processing = true;
                //currently processessing, so don't call function again until done
                $(".loading").fadeIn(200); //fade in loading bar

                postUrl = baseUrl + pageNumber; //calculate the page to load


                //AJAX CALL
                $.get(postUrl, function(data) {
                    //grab only post items from the loaded page
                    var posts = $(data).find(".col-item");
                    
                    //check that the loaded page has content
                    if (posts.length > 0) {
                        console.log(loadingImgUrl);
                        //fade out the loading bar, then attach the new items to the end of the list
                        $(".loading").fadeOut(200, function() {
                            posts.appendTo(".blog-listing .container-wrap");
                            
                        });
                        pageNumber++; //increment the page to load.
                        $(".next-posts-link").attr("href", baseUrl + pageNumber);

                    }
                    //if the loaded page doesn't have content, it means we have reached the end.
                    else {

                        turnOff = true;
                        $(".next-posts-link").after('<div class="next-posts-link unactive">Next</div>');
                        $(".next-posts-link:not(.unactive)").remove();
                        $(".loading").fadeOut(200);
                    }
                    processing = false; //we are done processing, so set up for the next time
                    setTimeout(function() {
                        twttr.widgets.load();
                        IN.parse();
                        FB.XFBML.parse();
                        gapi.plusone.go();
                    }, 350);
                });
            }
        });
    };
})(jQuery);

This is a pretty clunky script as is. At the moment when it attempts to load in a page that doesn't exist the console receives a 404 on the url, and the "loading..." text stays at the bottom of the page. The couple of things I have tried don't work. any suggestions?

Edit** I think that the obvious place to check if the url exists would be at:

pageNumber++; //increment the page to load.
                    $(".next-posts-link").attr("href", baseUrl + pageNumber);

because this is where pageNumber is increased and then passed back to postUrl:

 postUrl = baseUrl + pageNumber; //calculate the page to load


            //AJAX CALL
            $.get(postUrl, function(data) {

Not sure if I am on track on this or not though.

Edit*** figured the live link may be helpful:

http://blog.bbjlinen.com/test-blog

Answer 1

Have you tried adding the fail handler: https://api.jquery.com/jquery.get/

$.get(postUrl, function(data){
  ...
  ...
}).fail(function(){
  //whatever you need to do here
});

This should trigger if the request returns a 404

You could also use this to check the status of the request:

.fail(function(response){
   if(response.status == 404){
      ...
   }
}