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

Shawn Northrop · Accepted Answer · 2016-08-29 17:27:48Z

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){
      ...
   }
}

edited Aug 29, 2016 at 17:27

answered Aug 29, 2016 at 17:11

Shawn Northrop

6,0747 gold badges45 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JSum Over a year ago

This worked in that I could log a failure message when the issue takes place. It was after the fact though so I'm not sure I could use this to keep keep the issue from taking place.

Shawn Northrop Over a year ago

What is the 'issue' that takes place? That it says loading? You could simply remove the loading status on fail.

Shawn Northrop Over a year ago

You could make another call before you try to load the content, basically make the call and see if it fails, if not make the call again but load the content, that seems inefficient though

Shawn Northrop Over a year ago

If you have access to modify the backend you could add a header to the response that tells you how many pages there are

JSum Over a year ago

ideally I would have liked to avoid the 404 all together but i'm not really ajax savvy. I used the on fail to hide the loading like you suggested. Thanks a lot for your help.

Collectives™ on Stack Overflow

Check if a dynamically url exists within an ajax function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related