I have a problem with a javascript that shows xml data in a table. The script works fine in Firefox, but does not display in Internet Explorer (IE6, W2K). Below you see three files, script_ee.js, index.html and data.xml. The script should show a very simple table, two columns with three rows (ID, firstname, lastname, for the first person).
When I open this file in Firefox, the table is displayed like expected. When I open it in IE, I don't see a table. You will see two links on the bottom of the page, which should show the innerHTML of the document. Clicking these links will show the correct HTML. If you click the "show html" link, the table suddenly displays properly in IE. It looks like IE creates the code, but forgets to display it. What am I doing wrong here, and how do I get IE to show the code properly right away?
Another problem I have is that IE uses capitals for the HTML that's created. It doesn't seem a problem, but I wonder why, and if it's possible to make it lowercase.
/********** script_ee.js *********/
function importXML()
// import XML data from external file
{
if (document.implementation && document.implementation.cr
eateDocume
nt)
{
xmlDoc = document.implementation.cr
eateDocume
nt("", "", null);
xmlDoc.onload = showDetails;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.X
MLDOM");
xmlDoc.onreadystatechange = function () {if (xmlDoc.readyState == 4) showDetails()};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("data.xml");
}
function showDetails()
{
var x, xTable, xTbody, xRow, xCell, xData, xPar, xBold, xInput;
x = xmlDoc.getElementsByTagNam
e('person'
);
xTable = document.createElement('ta
ble');
xTable.setAttribute('class
','details
');
for (j=0;j<x[0].childNodes.len
gth;j++)
{
xRow = document.createElement('tr
');
if (x[0].childNodes[j].nodeTy
pe != 1) continue;
// create title xCell
xCell = document.createElement('th
');
xData = document.createTextNode(x[
0].childNo
des[j].nod
eName)
xCell.appendChild(xData);
xRow.appendChild(xCell);
// create value xCell
xCell = document.createElement('td
');
xData = document.createTextNode(x[
0].childNo
des[j].fir
stChild.no
deValue);
xCell.appendChild(xData);
xRow.appendChild(xCell);
xTable.appendChild(xRow);
}
document.getElementById('w
riteroot')
.appendChi
ld(xTable)
;
}
function showBody()
{
vc = window.open("", "viewcode", "fullscreen=no,toolbar=yes
,status=ye
s,menubar=
yes, scrollbars=yes,resizable=y
es,locatio
n=yes,widt
h=400,heig
ht=400,lef
t=50,top=5
0");
vc.document.write("<html><
head><titl
e>Code</ti
tle></head
><body>" + self.document.body.innerHT
ML + "</body></html>");
vc.document.close();
}
function alertBody()
{
window.alert(self.document
.body.inne
rHTML);
}
/********** index.html *********/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>JavaScript IE - Import XML Document</title>
<script src="script_ee.js" language="JavaScript" type="text/javascript"></s
cript>
</head>
<body onload="importXML();">
<h1>Import XML document</h1>
<div id="writeroot"></div>
<hr />
<a href="javascript:showBody(
);">Show HTML</a> / <a href="javascript:alertBody
();">Alert
HTML</a>
</body>
</html>
/********** data.xml *********/
<persons>
<person>
<id>10001</id>
<firstname>John</firstname
>
<lastname>Mulder</lastname
>
</person>
<person>
<id>10005</id>
<firstname>Diane</firstnam
e>
<lastname>Sanders</lastnam
e>
</person>
<person>
<id>10019</id>
<firstname>Alicia</firstna
me>
<lastname>York</lastname>
</person>
</persons>
