Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2012-04-08
3
Medium Priority
?
357 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

636 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