How to test a URL in jQuery

Question

I have a URL which I want to open in a FancyBox (or any other overlay-type pop-up). I don't know in advance whether URL is good, so I want to test it. If invalid - I won't attach the fancyBox plugin to that particular URL, it will just be a regular link. How can I test a URL before attaching a plugin to it? Tried doing something like:

$("a.overlay").each(function() {
    var xhr = $.get(this.href, function(data, status) {
        // never executed in case of a failed request
    });
    if (xhr.status && xhr.status === 404)) {
        // not good, do nothing
    } else {
        // can attach plugin here
    }
});

The problem is, xhr will not always be defined because JS doesn't wait for the request to complete. Similarly, I cannot use the callback function, because it doesn't seem to be executing in case the request fails (I can see it in Firebug, but that's not very useful).

Thanks and have a good weekend everyone.

Answer 1

You can do it like this, although I would question how wise it is to make a request for each link....

$("a.overlay").each(function() {
    var $a = $(this);
    $.ajax({
        type: 'GET',
        url: this.href,
        success: function() {
            // attach plugin here
        },
        error: function() {
            // not good, log it
        }            
    });
});

If you're not going to do anything with the contents of the page, you could switch 'GET' with 'HEAD' to only get the headers of the page requested, which would be faster and let you know what you want.

Answer 2

Paolo gave you the answer to what you asked for- But it seems wasteful to me for every client to check the quality of the link every time. Not only does it waste the target's bandwidth, it waste's the client's time.

This is something that could and should be done once, (perhaps daily) on the server side. From there you should generate appropriate html/js. From an engineering standpoint, it just seems like a wiser approach to me.

I don't know what sort of serverside framework you're using, if any, but any of the ones I've worked with have fairly straightforward http clients built in, and chronjob/scheduled job facilities.

alternatively you could author the page such that the first request of the day does the check, and the results are cached to the disk (or memory) for future requests throughout the day. That first load might go a bit slow though.

Answer 3

Looking at your question The problem is, xhr will not always be defined because JS doesn't wait for the request to complete., it is possible to make the call wait for the response by creating a

$().ajax({args});

Call with async: false.

Check the argument async on http://api.jquery.com/jQuery.ajax/ for more details.

Answer 4

I know this is quite old but still adding it in case someone comes across and wants more options. Take a look at this plugin: http://www.webmonkey.com/2010/07/beautify-broken-links-with-catch404/

Description from webmonkey:

But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out.