ajax - 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.