?
Solved

image not loading via innerHtml

Posted on 2010-08-22
9
Medium Priority
?
270 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
[X]
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
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
Technology Partners: 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

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 83

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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

ASP.NET AJAX callbacks to web service are becoming very popular and unavoidable these days. The feel that the user gets when only a part of the page is updated without even hindering the UI is the advantage that the callbacks offer. The wait for the…
There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
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…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

770 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