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.