Solved

image not loading via innerHtml

Posted on 2010-08-22
9
255 Views
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();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
var xmlDoc=xmlhttp.responseXML;
var html=xmlDoc.getElementsByTagName("info")[0];
document.getElementById("infoDiv").innerHTML=html;

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.  

img=document.createElement("img");
img.src=imgPath;

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.
0
Comment
Question by:wthengineering
9 Comments
 
LVL 9

Expert Comment

by:Snarfles
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...
0
 

Author Comment

by:wthengineering
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>
0
 
LVL 9

Expert Comment

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

<img src="tgis/minus.png" id="iid1" onmouseup="showHideTable(1);"/>
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 58

Expert Comment

by:cyberkiwi
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();

//xmlhttp.open("GET",url,false);

//xmlhttp.send(null);

//var xmlDoc=xmlhttp.responseXML;

//var html=xmlDoc.getElementsByTagName("info")[0];

//document.getElementById("infoDiv").innerHTML=html;



$.get(url, function(data) {

  $("infoDiv").html(data.getElementsByTagName("info")[0]);

}

Open in new window

0
 
LVL 82

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.
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

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

</body>
</html>

Open in new window

0
 

Author Comment

by:wthengineering
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.


0
 

Accepted Solution

by:
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
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
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…
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…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now