Question

I have a table which repeats an image link to a file download for every row of data. I want to use Jquery or Javascript to detect if a image link returns a 404 error, meaning the file its trying to find doesn’t exist, then set the image link to display:none so its hidden.

Any help is much appreciated!

Jamie.

—Edit—

This is my url which needs to be set to hidden if it cant find the .igs file

<a href="/path/to/file.igs"><img src="pic.jpg" alt="My Image Link"></a>

Unfortunately I cannot utilize server-side processing.

Answer 1

You can use the error() event handler:

$("img").error(function () {
    $(this).css("display", "none");
});

---

I see that a few of us misunderstood your origin question, your edit clears it up a little. You can achieve what you want only by using AJAX. Just requesting the headers for the file should be enough:

// Find all <a> tags where href ends with .igs, hide and loop over them 
$("a[href$=.igs]").hide().each(function (i, el) {
    $.ajax({
        type: "HEAD",
        url: el.href,
        success: function () {
            // Success, we can unhide the element.
            el.show();
        }
    });        
});

Of course, this won’t work if the files are on other domains. Also, this can be quite a costly procedure for both the client and the server if there’s a lot of them.