uknowmeim
06-26-2010, 07:18 AM
I have an XML file that i am importing the information into a HTML document. The page renders in Mozilla Firefox browser and in Opera but it does not render the information in Safari or iE 8. Can someone tell me what adjustments i may need.
The code is intended to create a table with the XML information and display it on the HTML.
this is my .xml file
<books>
<book>
<title>MySQL Bible</title>
<author>Steve Suehring</author>
<isbn>9780764549328</isbn>
<publisher>Wiley Publishing Inc.</publisher>
</book>
<book>
<title>JavaScript Step by Step</title>
<author>Steve Suehring</author>
<isbn>9780735624498</isbn>
<publisher>Microsoft Press</publisher>
</book>
<book>
<title>MySQL Bible</title>
<author>Steve Suehring</author>
<isbn>9780764549328</isbn>
<publisher>Wiley Publishing Inc.</publisher>
</book>
</books>
and this is my HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Books</title>
</head>
<body>
<div id="xmldata"></div>
<script language="javaScript" type="text/javascript">
function displayData(){
var xmlEl = docObj.getElementsByTagName("book");
var table = document.createElement("table");
table.border = "1";
table.style.position = "absolute";
table.style.top = "200px";
table.style.left = "25%";
var tbody = document.createElement("tbody");
// Append the body to the table
table.appendChild(tbody);
var row = document.createElement("tr");
row.style.backgroundColor = "#aaabba";
//Create Header and append to row
for (colHead = 0; colHead < xmlEl[0].childNodes.length; colHead++){
if (xmlEl[0].childNodes[colHead].nodeType !=1) {
continue;
}
var tableHead = document.createElement("th");
var colName = document.createTextNode(xmlEl[0].childNodes[colHead].nodeName);
tableHead.appendChild(colName);
row.appendChild(tableHead);
}
// Append the row to the body
tbody.appendChild(row);
// Create table rows
for (i=0; i < xmlEl.length; i++){
var row = document.createElement("tr");
// Create the row/td elements
for (j=0; j < xmlEl[i].childNodes.length; j++){
if (xmlEl[i].childNodes[j].nodeType != 1){
continue;
}
//insert the actual text/data from the XML document.
var td = document.createElement("td");
var xmlData = document.createTextNode(xmlEl[i].childNodes[j].firstChild.nodeValue);
td.appendChild(xmlData);
row.appendChild(td);
}
tbody.appendChild(row);
}
document.getElementById("xmldata").appendChild(table);
}
function getXML(){
if (typeof document.implementation.createDocument != "undefined") {
docObj = document.implementation.createDocument("", "", null);
docObj.onload = displayData;
}
else if (window.ActiveXObject) {
docObj = new ActiveXObject("Microsoft.XMLDOM");
docObj.onreadystatechange = function () {
if (docObj.readState == 4) displayData()
};
}
docObj.load("books.xml");
}
window.onload = getXML;
</script>
</body>
</html>
The code is intended to create a table with the XML information and display it on the HTML.
this is my .xml file
<books>
<book>
<title>MySQL Bible</title>
<author>Steve Suehring</author>
<isbn>9780764549328</isbn>
<publisher>Wiley Publishing Inc.</publisher>
</book>
<book>
<title>JavaScript Step by Step</title>
<author>Steve Suehring</author>
<isbn>9780735624498</isbn>
<publisher>Microsoft Press</publisher>
</book>
<book>
<title>MySQL Bible</title>
<author>Steve Suehring</author>
<isbn>9780764549328</isbn>
<publisher>Wiley Publishing Inc.</publisher>
</book>
</books>
and this is my HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Books</title>
</head>
<body>
<div id="xmldata"></div>
<script language="javaScript" type="text/javascript">
function displayData(){
var xmlEl = docObj.getElementsByTagName("book");
var table = document.createElement("table");
table.border = "1";
table.style.position = "absolute";
table.style.top = "200px";
table.style.left = "25%";
var tbody = document.createElement("tbody");
// Append the body to the table
table.appendChild(tbody);
var row = document.createElement("tr");
row.style.backgroundColor = "#aaabba";
//Create Header and append to row
for (colHead = 0; colHead < xmlEl[0].childNodes.length; colHead++){
if (xmlEl[0].childNodes[colHead].nodeType !=1) {
continue;
}
var tableHead = document.createElement("th");
var colName = document.createTextNode(xmlEl[0].childNodes[colHead].nodeName);
tableHead.appendChild(colName);
row.appendChild(tableHead);
}
// Append the row to the body
tbody.appendChild(row);
// Create table rows
for (i=0; i < xmlEl.length; i++){
var row = document.createElement("tr");
// Create the row/td elements
for (j=0; j < xmlEl[i].childNodes.length; j++){
if (xmlEl[i].childNodes[j].nodeType != 1){
continue;
}
//insert the actual text/data from the XML document.
var td = document.createElement("td");
var xmlData = document.createTextNode(xmlEl[i].childNodes[j].firstChild.nodeValue);
td.appendChild(xmlData);
row.appendChild(td);
}
tbody.appendChild(row);
}
document.getElementById("xmldata").appendChild(table);
}
function getXML(){
if (typeof document.implementation.createDocument != "undefined") {
docObj = document.implementation.createDocument("", "", null);
docObj.onload = displayData;
}
else if (window.ActiveXObject) {
docObj = new ActiveXObject("Microsoft.XMLDOM");
docObj.onreadystatechange = function () {
if (docObj.readState == 4) displayData()
};
}
docObj.load("books.xml");
}
window.onload = getXML;
</script>
</body>
</html>