JSum JSum - 1 year ago 89
Javascript Question

Check if a dynamically url exists within an ajax function

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

$.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) {
//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>');
processing = false; //we are done processing, so set up for the next time
setTimeout(function() {
}, 350);

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

$.get(postUrl, function(data) {

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

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


Answer Source

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

$.get(postUrl, function(data){
  //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:

   if(response.status == 404){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download