I'm trying to get the onError event to work but so far it only works in Internet Explorer 9. I have tried several codes but basically it comes down to this:
<img class="a_toc_image" src="' + asap.imgurl + '" onError="this.src=\'images/no_image.png\';" />
Fail : Displays no_image.png
Chrome 20.0.11:
Fail : Just whitespace
Firefox 14.0.1:
Many mostly aesthetical variants on this code ( such as leaving out or putting in " or ' ) yield similar results. This specific variant yielded a stack overflow in Iexplorer but otherwise nothing changed:
<img class="a_toc_image" src="' + asap.imgurl + '" onError=this.src="\images/no_image.png()" />
Who can tell me what is going wrong here and why it will only work in Iexplorer 9?
Thanks!
When using "inspect element" in Chrome on an image that fails to load I see this:
<img class="a_toc_image" src="images/no_image.png" onerror="this.src='images/no_image.png';">
So it looks like it is generating the correct output but for some reason won't show the image, correct? I have tried to put a .jpg instead of .png just now (maybe Chrome would just not show .png images) but that also does not solve anything.
-Addition 2, preceding code
// General functions
var open_mask = function () {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("fast",0.7);
};
var center_dialog = function (dialog) {
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
var dialog_top = (winH/2-dialog.height()/2) + $(window).scrollTop();
var dialog_left = (winW/2-dialog.width()/2) + $(window).scrollLeft();
dialog_top = (dialog_top >= 0) ? dialog_top : 0;
dialog_left = (dialog_left >= 0) ? dialog_left : 0;
dialog.css('top', dialog_top);
dialog.css('left', dialog_left);
};
//function that creates posts
var updatepostHandler = function(postsJSON) {
$.each(postsJSON,function(i,asap) {
if(i === 0) {
first = asap.first;
last = asap.last;
} else {
if(asap.type === 'article') {
$('<div></div>') //create the HTML
.addClass('solid')
.html('<div class="titbox">' + asap.title + '</div> \
<div class="boxinsolid"> \
<div class="aubox">' + asap.authors + '</div> \
<div class="doibox"> DOI: ' + asap.doi + ' </div> \
<div class="joubox">' + asap.journal + '</div> \
</div> \
<div class="imgbox"> \
<img class="a_toc_image" src="' + asap.imgurl + '" onError="this.src=\'images/no_image.png\';" /> \
</div>')
.click(function(e) {
open_details(e, asap.id);
})
.prependTo($('#container'))
.slideDown('slow')
} else if(asap.type === 'ad') {
$('<div></div>') //create the HTML
.addClass('ad')
.html('<div class="titbox">' + asap.title + '</div> \
<div class="boxinsolid"> \
<div class="aubox">' + asap.authors + '</div> \
<div class="doibox"> </div> \
<div class="joubox">' + asap.company + '</div> \
</div> \
<div class="imgbox"> \
<img class="a_toc_image" src="' + asap.image + '" onError="this.src=\'images/no_image.png\';" /> \
</div>')
.click(function(e) {
open_details(e, asap.ad_id);
})
.prependTo($('#container'))
.slideDown('slow')
}
};
});
};
I tried it in Chrome and FF it seems that the problem is the (unnecessary) backslashes before your single quote characters. See this example: http://jsfiddle.net/Yapad/
So, you should use this code, instead of your code:
<img class="a_toc_image" src="' + asap.imgurl + '" onerror="this.src='images/no_image.png';">
Edit: Sidestepping the issue with proper handling of asap.imgurl would look like this:
<img class="a_toc_image" src="' + (asap.imgurl != "" ? asap.imgurl:"/images/no_image.png") + '">