Some of the img elements that I am building dynamically can (do) fail. For these cases, I have the code I got from here: Is there a way to programmatically determine that the image link is bad? namely this:
function getNatlBookCritics() { var htmlBuilder = '';
... but it does not work. Warum nicht?
UPDATE
With this code inside. A separate part of the call to $ .getJSON ():
var jObject = $('<img src=\"' + dataPoint.imghref + '\"/>'); $(jObject).error(function () { $(this).attr("src", "Content/NoImageAvailable.jpg"); });
... all images do not work. dataPoint.imghref contains values such as:
http://www.amazon.com/exec/obidos/ASIN/B00655KLOY/garrphotgall-20
UPDATE 2
In nutty hell, I add "img src" like this:
function getNatlBookCritics() { var htmlBuilder = ''; $.getJSON('Content/nbcc.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + . . . htmlBuilder += '</section>'; }
... since you can see that img is being added to the DOM; perhaps the fact that i have height and width properties with my img is a problem ...
UPDATE 3
ManMohan Vyas: You mean this:
}); //each $('#BooksContent').append(htmlBuilder). find("img").error(function(){ $(this).attr("src", "Content/NoImageAvailable.png"); }); }); //getJSON()
?
UPDATE 4
It:
var jObject = $(htmlBuilder); jObject.find("img").error(function () { $(this).attr("src", "Content/NoImageAvailable.png"); }); $('#BooksContent').append(jObject);
... does not work.
And FWIW, changing this:
$('#BooksContent').html('');
., $ ('# BooksContent') adds (htmlBuilder).
... to that:
$ ('# BooksContent') ReplaceWith (htmlBuilder).
... does not work (the desired material is full, but the formatting is messed up (instead of a solid black background, each section had a black background, but the general background was silver).
UPDATE 5
I just thought of something that might cause my problem: the images I'm trying to display are all jpg, but the image "Image not available" is png. Does it matter? Perhaps this is what causes the visualization engine to get confused? If so, I will just save the backup img as jpg ...
UPDATE 6
No, these last two attempts did not work either. I tried the idea of Joseph Myers, then Throne, when I changed this:
dataPoint.imghref + '\"' + ' onerror=\"imgError(this);\" target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' +
.. to that:
dataPoint.imgsrc + '\" onerror=\"imgError(this);\"' + dataPoint.imgalt + '></img></a>' +
... and no difference. I asked a little about this in the jQuery forum: I grab onto a straw here, but I wonder if there might be a problem with inappropriate versions of jQuery / jQueryUI? To support older browsers, I'm still using jQuery 1.9.1, but I'm on the edge of the bloodstream with regard to jQueryUI with version 1.10.3.
UPDATE 7
Well, here is all the relevant code (some redundant and controversial code to be reorganized was excluded to comply with SO length restrictions). (Static) CSS shouldn't matter, right? The only other “code” is Web.config and such things, so none of this should affect why I can't get reverse images to display.
Many of my unsuccessful attempts to get NoImageAvailable.png for display are commented out.
@{ Layout = "~/_SiteLayout.cshtml"; Page.Title = "My Next Winner"; } <div id="tabs" class="content-wrapper"> <ul> <li><a href="#tab-Books">Books</a></li> <li><a href="#tab-Movies">Movies</a></li> <li><a href="#tab-Music">Music</a></li> </ul> <div id="tab-Books"> <select id="bookDropDown"> <option value="Pulitzer">Pulitzer</option> <option value="NBCC">National Book Critics Circle</option> <option value="NBA">National Book Awards</option> <option value="NOBA">National Outdoors Book Awards</option> </select> <div id="BooksContent" class="clearfix">Content in Books tab</div> </div> <div id="tab-Movies">
., ,,
<script> $.ajaxSetup({ cache: false }); var currentBookSelection = ''; var currentMovieSelection = ''; var currentMusicSelection = ''; function imgError(image) { image.onerror = ""; image.src = "Content/NoImageAvailable.png"; return true; } // BOOKS // TODO: Refactor: just have one "getBooks()" function, passing in the name of the json file function getNatlBookCritics() { var htmlBuilder = ''; $.getJSON('Content/nbcc.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children books) to change height and width of img htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + //dataPoint.imghref + '\"' + ' onerror=\"imgError(this);\" target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + //dataPoint.imgsrc + '\" onerror=\"imgError(this);\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" >' + dataPoint.title + '</cite><br/><div id=\"prizeArtist\" class=\"author\">' + dataPoint.author + '</div><br/>'; if (dataPoint.kindle.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.kindle) + '\"' + ' target=\"_blank\">Kindle</a></button>'; } if (dataPoint.paperback.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.paperback) + '\"' + ' target=\"_blank\">Paperback</a></button>'; } if (dataPoint.hardbound.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.hardbound) + '\"' + ' target=\"_blank\">Hardcover</a></button>'; } htmlBuilder += '</section>'; //// Doesn't work //$('img').error(function () { // $(this).attr("src", "Content/NoImageAvailable.png"); //}); // When get answer, try this: <-- they all fail with this //var jObject = $('<img src=\"' + dataPoint.imghref + '\"/>'); //var jObject = $('<img src=' + dataPoint.imghref + ' />'); //$(jObject).error(function () { // $(this).attr("src", "Content/NoImageAvailable.jpg"); //}); } }); //each //var jObject = $(htmlBuilder).find('img').error(function () { // $(this).attr("src", "Content/NoImageAvailable.png") //}); //$("#BooksContent").html(jObject); //var jObject = $(htmlBuilder); //jObject.find("img").error(function () { // $(this).attr("src", "Content/NoImageAvailable.png"); //}); //$('#BooksContent').append(jObject); // 7/23 //imageError = function (it) { // $(it).attr("src", "Content/NoImageAvailable.png"); //}; //htmlBuilder = htmlBuilder.replace(/<img/g, '<img onerror="imageError(this)"'); //var jObject = $(htmlBuilder); //$("#BooksContent").html(jObject); // </ 7/23 //$('#BooksContent').html(''); //$('#BooksContent').append(htmlBuilder); ////try this 7/24/2013 //var $jObject = $('<img>'); //$jObject.error(function () { //$jObject is already a jquery object, don't wrap it again // $(this).attr("src", "Content/NoImageAvailable.jpg"); //}).attr('src', dataPoint.imghref); //</try this 7/24/2013 //$('#BooksContent').html(htmlBuilder); $('#BooksContent').html(htmlBuilder). find('img, button').click(function (evt) { $(this).css('border', '1px solid red') //evt.preventDefault(); //find('img').error(function() { // this.src = "/Content/NoImageAvailable.png" //}) }); //$('#BooksContent').replaceWith(htmlBuilder); //.find('img').error(function() { // this.src = "Content/NoImageAvailable.png" // //this.src = "http://www.gravatar.com/avatar/317f4b62da2b0186feac9b6209793505?s=80&d=http%3A%2F%2Fimg.zohostatic.com%2Fdiscussions%2Fv1%2Fimages%2FdefaultPhoto.png"; //}); $('#BooksContent').css('background-color', 'black'); $('button').button(); }); //getJSONnbcc $largest = 0; $(".wrapper").each(function () { if ($(this).height() > $largest) { $largest = $(this).height(); } }); $(".wrapper").css("height", $largest); } // getNatlBookCritics() function getPulitzers() { // Since pulitzers will be the one that shows when site first opens, added rel="nofollow" // in each href; in this way only this method differs from the other "getX" book methods var htmlBuilder = ''; $.getJSON('Content/pulitzers2.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children books) to change height and width of img htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" >' + dataPoint.title + '</cite><br/><div id=\"prizeArtist\" class=\"author\">' + dataPoint.author + '</div><br/>'; if (dataPoint.kindle.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.kindle) + '\"' + ' target=\"_blank\" rel=\"nofollow\" >Kindle</a></button>'; } if (dataPoint.hardbound.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.hardbound) + '\"' + ' target=\"_blank\" rel=\"nofollow\" >Hardcover</a></button>'; } if (dataPoint.paperback.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.paperback) + '\"' + ' target=\"_blank\" rel=\"nofollow\" >Paperback</a></button>'; } htmlBuilder += '</section>'; } }); //each $('#BooksContent').html(htmlBuilder). find('img, button').click(function (evt) { $(this).css('border', '1px solid red') }); $('#BooksContent').css('background-color', 'black'); $('button').button(); }); //getPulitzers $largest = 0; $(".wrapper").each(function () { if ($(this).height() > $largest) { $largest = $(this).height(); } }); $(".wrapper").css("height", $largest); // This is not working; axed a question on the jQuery forum $('img, button').click(function (evt) { $(this).css('border', '5px solid green'); evt.preventDefault(); }); // added this 7/24/2013 - does nothing //$(function () { // $('a').click(function () { // open(this.href, 'NewWin', 'toolbar=yes'); // self.focus(); // return false; // }); //}); } // getPulitzers() function getNatlBook() {
.,} // getNatlBook ()
function getNOBA() { // load bookContents using getJSON } // MOVIES // Movies differ from books and music in that some of the awards do not always have a person as winner - just the movie // So we have to check for that and conditionally add that bit of html (what corresponds to author in books and // artist in music) function getMovies(pathToJsonFile) { var htmlBuilder = ''; $.getJSON(pathToJsonFile, function (data) { // I tried renaming the above to nbcc.json, but it won't work with that name...?!? $.getJSON('Content/nbcc.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children books) to change height and width of img htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" >' + dataPoint.film + '</cite><br/>'; if (dataPoint.person.trim().length > 2) { htmlBuilder += '<div id=\"prizeArtist\" class=\"person\">' + dataPoint.person + '</div><br/>'; } if (dataPoint.bluray.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.bluray) + '\"' + ' target=\"_blank\" >BluRay</a></button>'; } if (dataPoint.dvd.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.dvd) + '\"' + ' target=\"_blank\" >DVD</a></button>'; } htmlBuilder += '</section>'; } }); //each $('#MoviesContent').html(htmlBuilder). find('img, button').click(function (evt) { $(this).css('border', '1px solid silver') }); $('#MoviesContent').css('background-color', 'black'); $('button').button(); //console.log(htmlBuilder); <-- may want this for response to click on tab when movie tab is selected }); //getOscars $largest = 0; $(".wrapper").each(function () { if ($(this).height() > $largest) { $largest = $(this).height(); } }); $(".wrapper").css("height", $largest); } // MUSIC // "work" is used for "album or song or recording or performance" //TODO: Make this a generic "Music" function a la Movies above function getGrammies() { var htmlBuilder = ''; $.getJSON('Content/grammies.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children books) to change height and width of img htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" >' + dataPoint.work + '</cite><br/><div id=\"prizeArtist\" class=\"work\">' + dataPoint.artist + '</div><br/>'; if (dataPoint.mp3.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.mp3) + '\"' + ' target=\"_blank\">mp3</a></button>'; } if (dataPoint.dvd.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.dvd) + '\"' + ' target=\"_blank\">DVD</a></button>'; } if (dataPoint.vinyl.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.vinyl) + '\"' + ' target=\"_blank\">Vinyl</a></button>'; } htmlBuilder += '</section>'; //// Doesn't work //$('img').error(function () { // $(this).attr("src", "Content/NoImageAvailable.png"); //}); } }); //each $('
UPDATE 8
Barvaz's answer doesn't work for me either; maybe i am doing it wrong? Based on his answer, I added the following:
CSS
.noImg { background:url(~/Content/NoImageAvailable.png); }
JQuery
0) Added this to the finished handler:
replaceEmptyImage = function ($img) { $img.parent().addClass('noImg'); $img.remove(); };
1) Changed this line:
dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
... to that:
dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" onerror=\"replaceEmptyImage($(this))\" src=\"' +
UPDATE 9
Here is what it looks like (there is a “block” or “object” image, it's just black / empty):
By the way, Jamie MacFets Travel is, oddly enough, a terrific book, but perhaps especially for your children to read (any age, but maybe a pre-teen is optimal).