Document.createElement("img") not working in IE

JavaScript
1

Hello,

I’m writing this javascript to place dynamically created images into a page, it works as expected in FireFox and Chrome, but not IE8, nothing appears and I get no error message. I’m placing the images into this DIV:


<div id="overviewMap" style="left: 0px; right: 0px; width: 2048px; height: 1620px; overflow: auto;" align='center' ></div>

and have written this code to place the small images into the DIV:


var mapDiv   = document.getElementById("overviewMap");

// mapData is an array
for (var i=0; i < mapData.length; i++) {
        MapID = mapData[i][1];
        request = mapData[i][2];
        
        reqURL  = "mapov.php?id="+MapID+request;
        sendmapImg(mapDiv, reqURL,MapID);
}

function sendmapImg(mapDiv, reqURL,MapID)
{
    var eid = "m" + MapID.replace(".","-");
    var element =  document.createElement("img");
   // var element = new Image(); doesn't work either
    element.src     = reqURL;
    element.width  = '128';
    element.height = '90';
    element.alt    = MapID;
    element.id     = eid;

    mapDiv.appendChild(element);
    return;
}

Can anyone help?
Thanks

Karl

2

We aren’t able to recreate your situatoin as we don’t have things like mapData

Please either provide enough information for us to duplicate your issue, or link through to a test page where it can be experienced.

3

You should provide a link to a working demo for something like this

4

Yes, you are quite right. I was hoping that the problem was obvious.

Here is the demo:
http://dsdev.shu.ac.uk/mapsdemo/?overview

And this is the script:
http://dsdev.shu.ac.uk/mapsdemo/overview.js

the function overview() makes an XML query, and the response is processed in the for loop. The created image is presented to screen in spurtImg(). This is the part that fails in IE without an error message.

Karl.

5

When IE8 receives the JSON xml response, the browser doesn’t appear to be retrieving the values properly.

Using the IE8 debugger (it’s in Tools -> Development Tools) select the overview.js script from the dropdown list just right of the Debugging button, and place a breakpoint on the “var XMLdata = …” line.

Select the Locals view and click the start debugging button.

use the Step Into button (or F11) to step line by line through the code.

When the httpRequest is received, it looks like you have a responseBody full of data, but the responseXML shows that the childNodes has an item saying “Invalid number of parameters. IXMLDOMNode” and a length of 0

So the rest of your code cannot get any XML data items from there.

Here’s hoping that this info helps you in some way.

6

Thanks for that. Very useful, I just spent a couple of hours looking into it and can’t fathom why the XML isn’t being read properly. The code that makes that the XML request was taken from https://developer.mozilla.org/en/AJAX/Getting_Started and works properly where I’ve used it in other work.

The XML Data structure is like:


<?xml version="1.0" encoding="ISO-8859-1"?>
<Response>
    <Overview>
        <Data>
            <MapID>263.13</MapID>
            <Status>ok</Status>
            <ImageName>263_13.jpg</ImageName>
            <MapPath>mapdata/overview/</MapPath>
        </Data>
        <Data>
            <MapID>263.14</MapID>
            <Status>part</Status>
            <ImageName>263_14.jpg</ImageName>
            <MapPath>mapdata/overview/</MapPath>
        </Data>
        <Data>
            <MapID>253.15</MapID>
            <Status>unoccupied</Status>
            <ImageName>0</ImageName>
            <MapPath>mapdata/overview/</MapPath>
        </Data>
        <Data>
            <MapID>253.16</MapID>
            <Status>empty</Status>
            <ImageName>0</ImageName>
            <MapPath>mapdata/overview/</MapPath>
        </Data>
    </Overview>
</Response>

I have used similar code in other work without this problem. Its rather baffling.

Karl.

7

Try having your server send the following http header for the xml document.

Content-Type: text/xml; charset=iso-8859-1

Maybe IE doesn’t like that xhtml mime type.

8

It might be because IE reads empty nodes for the whitespace while other browser skip over the whitespace.

9

Hello,
My XML server already sends the content type text/html for IE and application/xhtml+xml for firefox. Changing it to application/xhtml+xml for IE made no difference.

There shouldn’t be any whitespace in the XML response, you can see the complete XML data here: http://dsdev.shu.ac.uk/mapsdemo/mapXML.py?t=overview and I really can’t see anything wrong with it.

I found a solution, or kludge, in overview.js by changing:

var xmlDoc  = XMLdata.responseXML;

to:

    if (window.DOMParser)
    {
        var xmlDoc  = XMLdata.responseXML;
    }
    else // Internet Explorer
    {
        var txtDoc  = XMLdata.responseText;
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(txtDoc);
    }

Works, except that it causes Opera to crash. I don’t think this is a very good solution.

Karl.

10

Your serving an XML document, but telling the remote client that its html? Of course you would expect misbehavings from the reading software. It’s an xml document. Declare it correctly. It’s not xhtml. It’s not html.

11

I should of read you earlier post properly, I was cutting and pasting from earlier work which works properly, so I made the mistake of missing the error. Now corrected.

Thanks for all the help

Karl