Solved

jQuery Best Practice:  Can I/Should I test for file not found error 404?

Posted on 2012-04-08
3
344 Views
Last Modified: 2012-06-27
I'm programatically appending table rows with the following code:

$.getJSON('cfc/schoollibraries.cfc?method=getLibraryList&returnformat=JSON', function(json) {
 var myHTML = '';
  $.each(json.DATA, function(i,col) {
   myHTML += '<tr><td>' + col[0] + '</td><td>' + col[1] + '</td><td><img src="/images/sponsoredlibraries/' + col[2] + '" width="80"></td><td>' + col[3] + '</td></tr>';
  $('#tsTable tbody').append(myHTML);
 });


Many of the referenced image files have not yet been uploaded, so I get many 404 errors when the script tries to load "missing" image files.

Is it possible in the $.each loop to first test if the file exists and then only execute the '<img src="/images/sponsoredlibraries/' + col[2] + '" width="80">' part of the code if it does in fact exist so that I then avoid getting the 404 errors?

If it can be done, should it be done (is it best practice) or does it not really matter?  (Would the additional time in testing for each file's existence in the looping offset the time of getting the failed 404 error messages)?

Hope this makes sense.
0
Comment
Question by:ShanghaiD
3 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37820770
best practice would be not to reference images that don't exist in the first place. i.e. "getLibraryList" should return a clean list of images that excludes images that don't exist yet.

if that is simply not possible then i would suggest the overhead of making the http request to the server just to check if the image exists would negate the benefits and you may as well just get the 404s.
0
 
LVL 20

Accepted Solution

by:
BuggyCoder earned 500 total points
ID: 37820968
you can make an ajax call for each image you get and process only if the call is successfull like this:-
$.each(json.DATA, function(i,col) {
   var imagePath = "/images/sponsoredlibraries/' + col[2];
   $.ajax({
    url:imagePath,
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
           myHTML += '<tr><td>' + col[0] + '</td><td>' + col[1] + '</td><td><img src="/images/sponsoredlibraries/' + col[2] + '" width="80"></td><td>' + col[3] + '</td></tr>';
    }
});
  $('#tsTable tbody').append(myHTML);
 });

Open in new window


Refer here for more details:-
http://stackoverflow.com/questions/3646914/how-do-i-check-if-file-exists-in-jquery-or-javascript
0
 

Author Closing Comment

by:ShanghaiD
ID: 37821641
Thank you! Exactly what I was looking for.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a pageā€¦
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now