• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

image not loading via innerHtml

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
wthengineering
Asked:
wthengineering
1 Solution
 
SnarflesCommented:
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
 
wthengineeringAuthor Commented:
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
 
SnarflesCommented:
you could try adding the trailing slash to the img tag

<img src="tgis/minus.png" id="iid1" onmouseup="showHideTable(1);"/>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
cyberkiwiCommented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
wthengineeringAuthor Commented:
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
 
wthengineeringAuthor Commented:
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now