image not loading via innerHtml

Posted on 2010-08-22
Medium Priority
Last Modified: 2014-01-21
I have a web page that uses javascript to populate the innerHTML of a div with html returned by an ajax call to our server.  

var xmlhttp=createXMLHTTPObject();
var xmlDoc=xmlhttp.responseXML;
var html=xmlDoc.getElementsByTagName("info")[0];

Open in new window

Occasionally, one or more img's contained in the html do not display in IE or FF.  FF shows a failed image icon but IE shows nothing at all where the image should go.  If I hard code the exact same html into the div it works fine.  Debugging shows the img element where it should be with the correct src.  It has happens with 135 byte png's as well as 200k jpg's.  I have worked around this in IE by preloading the images just prior to assigning the html string to the div's innerHTML.  


Open in new window

But this workaround has no effect in FF.  It appears to be somehow related to timing since any delay introduced by debugging often causes them to display correctly.  Does anyone have any suggestions as to the cause and/or solution to this problem.
Question by:wthengineering
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

Expert Comment

ID: 33497915
can you post the source of the img tag? One possibility is you are missing the / at the end ... though this only half the time has any effect...

Author Comment

ID: 33497938
Here is an example of the full html being assigned to the div's innerHTML.  the "tgis/minus.png" image is the one that doesn't show.  Note: even when i strip out the onmouseup event i get same results.

<b>Search Results For</b><br>&nbsp;&nbsp;&nbsp;&nbsp;cheng<p><img src="tgis/minus.png" id="iid1" onmouseup="showHideTable(1);"><b>Parcels</b><br><table width=100% id="tid1" cellpadding="8"><tr><td width=12>&nbsp;</td><td style="background-color:#DFEFFC;"><a id=oli0 href="javascript:showf(10,1453)">19-06-15-400-070.042-002</a><br>Cheng, Kam Chuen</td></tr><tr><td width=12>&nbsp;</td><td style="background-color:#D0E5F5;"><a id=oli1 href="javascript:showf(10,6165)">19-06-26-103-714.000-002</a><br>Cheng, Kam Chuen</td></tr><tr><td width=12>&nbsp;</td><td style="background-color:#DFEFFC;"><a id=oli2 href="javascript:showf(10,6166)">19-06-26-103-715.000-002</a><br>Cheng, Kam Chuen</td></tr></table></p>

Expert Comment

ID: 33497947
you could try adding the trailing slash to the img tag

<img src="tgis/minus.png" id="iid1" onmouseup="showHideTable(1);"/>
Independent Software Vendors: 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!

LVL 58

Expert Comment

ID: 33497968
Even if you get around this issue, something else will crop up next time that can easily be solved just by using a proper framework like jQuery.

For what it's worth, I believe you have to wrap the html fragment in a DIV node for some browsers.  If the extra DIV node is an issue, a loop to re-parent the children of the DIV to the intended parent, then removal of the DIV is the solution.

Download and include jquery.js in the header.
//var xmlhttp=createXMLHTTPObject();
//var xmlDoc=xmlhttp.responseXML;
//var html=xmlDoc.getElementsByTagName("info")[0];

$.get(url, function(data) {

Open in new window

LVL 84

Expert Comment

by:Dave Baldwin
ID: 33498224
Your AJAX call seems to be incomplete and doesn't do any of the sequencing tests.  This page: http://www.javascriptkit.com/dhtmltutors/ajaxgetpost.shtml shows how it should be written.   And below is a version from the W3Schools.  Either one should help you get your page working.
<script type="text/javascript">
function loadXMLDoc()
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  if (xmlhttp.readyState==4 && xmlhttp.status==200)

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>


Open in new window


Author Comment

ID: 33498302
Thanks for the above responses.  I have tried them all but still same results

I added the / to the end of the img tag.  I tried using the jquery html() function.  And I changed my ajax calls to be asynchronous.  

All tries successfully return and display the html but still a blank image.  And with all tries, if i right click on image location and choose "show Image" or "reload image" it displays fine and then all subsequent ajax calls display the image fine (assuming this is due to image now being cached)

I did discover a pattern.  It is related to how long the server takes to respond. As a test I hard coded the server to always send back the same html regardless of the request.  requests that take very little processing time on the server display perfectly upon return.  requests that take more than a couple seconds are the ones that result in the failed image.  Same HTML!  This led me to try the asynchronous call but still no workee.


Accepted Solution

wthengineering earned 0 total points
ID: 33500257
I found my problem.  Some later occuring code was issuing a stop command which was causing all objects in the process of downloading to stop.  Sorry for being so stupid.  But thanks again for the help

Featured Post

What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses

649 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