CODEWITHSUNDEEP
javascriptphp
Seti Net
Seti Net

Reputation: 743

Detecting 404 code in JavaScript

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?

Upvotes: 0

Views: 291

Answers (4)

Saravanan R
Saravanan R

Reputation: 9

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

Upvotes: 1

Fares M.
Fares M.

Reputation: 1538

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.

Upvotes: 0

souvickcse
souvickcse

Reputation: 7804

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/

Upvotes: 0

adeneo
adeneo

Reputation: 318162

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

Upvotes: 3

Related Questions