Detecting 404 code in JavaScript

Question

I need to be able to detect a missing image in JavaScript.

PHP on the server can't be used because the href is computed by JavaScript. Script that works when the file exists is:

Data_ID = _DataRow.getDataItem()["Data_ID"];// Picks up the ID of the data
   _HitJPG = document.getElementById("HitJPG");
JPGFileName = _DataRow.getDataItem()["JPGFileName"];
directory = JPGFileName.slice(0, 10);
directory = directory.replace(/-/g, "/");

_HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";

How can I detect a HTTP 404 code before I set the "InnerHTML" in the Div?

You could always use jQuery, the ajax function in it helps a lot, and sorts cross browser issues. — ArtOfCode
– ArtOfCode, Commented May 17, 2014 at 17:04
Do an AJAX request and wait for a response. (You do not need jQuery for this simple task.) — ComFreek
– ComFreek, Commented May 17, 2014 at 17:04

adeneo · Accepted Answer · 2014-05-17 17:05:48Z

3

You can use the onload and onerror events to detect wether or not the image can be loaded

var Data_ID     = _DataRow.getDataItem()["Data_ID"];
var _HitJPG     = document.getElementById("HitJPG");
var JPGFileName = _SETIDataRow.getDataItem()["JPGFileName"];//"2014-04-29T13-36-27.JPG"
var directory   = JPGFileName.slice(0, 10);

directory = directory.replace(/-/g, "/");

var image = new Image();

image.onerror = function() {
    // fail - image not available
}

image.onload = function() {
    // success - image available

    _HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";
}

image.src = "http://77.88.99.54/data/" + directory + "/" + JPGFileName

answered May 17, 2014 at 17:05

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:57:36Z

1

You can try this using ajax call as said in above answer. Let me give u the code snippet:

$.ajax({
  url: '<image file name>', // your file name
  success: function(data){
    alert('exists');
  },
  error: function(data){
    alert('does not exist');
  },
})

The above code was already given in stackoverflow for other javascript related questions. You may check that also for clarification.

Test if a file exists with javascript

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered May 17, 2014 at 17:33

Saravanan R

92 bronze badges

Comments

souvickcse · Accepted Answer · 2014-05-17 17:14:11Z

0

You can use ajax

var jqxhr = $.ajax( "your iamge url" )
.done(function() {
alert( "success" );
})
.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
})
.always(function() {
alert( "complete" );
});

Reference http://api.jquery.com/jquery.ajax/

answered May 17, 2014 at 17:14

souvickcse

7,8045 gold badges40 silver badges66 bronze badges

Comments

Fares M. · Accepted Answer · 2014-05-17 17:32:54Z

You can do it with ajax request, when you get the response from the server, check the response status, example of javascript/jQuery function:

function fileExists(urlToCheck){
    var fileFound = true;
    $.ajax({
       url: urlToCheck,
       type: "GET",
       success: function(data, textStatus, xhr) {
           console.log(xhr.status);
           if(xhr.status == 404) fileFound= false;
       },
       complete: function(xhr, textStatus) {
           console.log(xhr.status);
           if(xhr.status == 404) fileFound= false;
       } 
    });
    return fileFound;
}

I think this function can be improved much more, by considering the different HTTP response codes, codes different from 404 but which doesn't mean that the file exists in the server.

Collectives™ on Stack Overflow

Detecting 404 code in JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related