On my site, I have a JQuery autocomplete. The autocomplete functionality is working fine. I have the data from the query pulling and storing the way I want it to.
This can all be seen here. (Source code can be viewed, Enjin makes it ugly but it's there.)
Currently, the return list is formatted to show a picture if one exists, and a placeholder if one does not.
return $("<li>").append("<a>" +
'<img class="imgThumb" onError="this.src=\'http://files.enjin.com/450575/file_storage/scripts/crScripts/images/placeholder.jpg\';" src="http://census.daybreakgames.com/files/dcuo/images/character/paperdoll/' + item.desc.character_id + '" style="float:left; margin-right: 6px; max-height: 50px;width: auto;">' + '<span style="display:table-cell; vertical-align:middle; height:50px;">' + item.value + "<br>CR: " + item.desc.combat_rating + " " + item.desc.world.name + '</span>' + "</a>").appendTo(ul);
}
The blank spot in the center of the page is an area I'd like to make the image from the return list bigger. However, I seem to have hit a snag here. The HTML for this spot on load is:
<img id="crCharImage" src="" class="ui-state-default" alt="" />
As part of the select function in the autocomplete's JQuery code I have:
$("#crCharImage").error(function() {$("#crCharImage").attr( "src", "http://files.enjin.com/450575/file_storage/scripts/crScripts/images/placeholder_large.png");}).attr("src", "http://census.daybreakgames.com/files/dcuo/images/character/paperdoll/" + ui.item.desc.character_id);
On characters where the image exists, the code works perfectly. The image displays, all is right in the world. (Can be seen by typing in trex to the Find Characters: input.) On characters where there is no image, instead of going through the onerror function, it just displays a broken image instead of my placeholder (as seen by typing in farm to the input box. Note the logo displayed in the dropdown...which is a smaller version of the placeholder.)
Am I using the .error incorrectly? Or is there another way to override this issue?
EDIT: Based on the responses, I went back through and looked at the append function as well as jQuery's built-in functions. I found .html and was able to utilize it to do what I wanted it to. I don't know why I couldn't get that to work initially but thank you to those suggesting looking at it again.
Based on the responses, I went back through and looked at the append function as well as jQuery's built-in functions. I found .html and was able to utilize it to do what I wanted it to. I don't know why I couldn't get that to work initially but thank you to those suggesting looking at it again.
Instead of using:
$("#crCharImage").error(function() {$("#crCharImage").attr( "src", "placeholder_image_url");}).attr("src", "api_url/" + ui.item.desc.character_id);
I replaced it with:
$("#crCharImage").html('<img onerror="this.src=\'placeholder_image_url'\';" src="api_url/" + ui.item.desc.character_id + '">');
I realize I'm answering this question years later, and there are probably numerous ways to do this better these days. But we did get this to work back in the day when the site was up.