PDA

View Full Version : XML and Javascript



sangren
10-18-2005, 02:44 PM
I am not sure if this question has been answered before or not, but I attempted to locate an answer and was unable to find a solution. I have some Javascript that I am attempting to use to allow the display of an XML document as a webpage. I believe the code is correct, but am unable to locate where my problem lies, the webpage comes back without any errors, but is a blank page.

My XML(cdcatalog.xml):

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited with XML Spy v4.2 -->
-<catalog>
-<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
-<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
-<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
-<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
</cd>
-<cd>
<title>Eros</title>
<artist>Aros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
-<cd>
<title>One night only</title>
<artist>Bee Gees</artist>
<country>UK</country>
<company>Polydor</company>
<price>10.90</price>
<year>1998</year>
</cd>
-<cd>
<title>Sylvias Mother</title>
<artist>Dr.Hook</artist>
<country>UK</country>
<company>CBS</company>
<price>8.10</price>
<year>1973</year>
</cd>
</catalog>
















My HTML:

<HTML>
<HEAD>
</HEAD>
<Title> A CD catalog </Title>

<Body>
<script type="text/javaScript">

// predeclare to prevent strict js error.
var xmlDoc;

// For IE based browsers:
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}

// For Mozilla based (standards compliant) browsers:
else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("","doc",null);
}

// Turn off asynchronous download.
// In other words, load the entire file before trying to do anything with it.
xmlDoc.async=false;

xmlDoc.load("cdcatalog.xml");

// Run onload of body
function ProcessXML()
{
var catalog = xmlDoc.getElementsByTagName("catalog")[0]; // First catalog.
var cds = catalog.getElementsByTagName("cd"); // All titles in catalog.

var results = '';

for (var i=0; cds.length > i; i++)
{
var Title = cds[i].getElementsByTagName("title");
var Artist = cds[i].getElementsByTagName("artist");
results += i+1 + '.' + Title[0].firstChild.nodeValue +
'performed by ' + Artist[0].firstChild.nodeValue + "\n\r";
}

document.getElementById("displayresults").firstChild.nodeValue = results;
}

</script>
</BODY>

Any assistance is greatly appreciated. Thanks in advance!

KC-Luck
10-18-2005, 07:35 PM
First thing wrong is "Edited with XML Spy v4.2"
XML Spy = lame..

well ok, it's fine, but all seems to run well here,
AFTER i removed the "-" characters in your sample xml.

oh yea, i did also change the final displayresults to
innerHTML instead of your firstChild.nodeValue stuff.

rm-f
10-18-2005, 07:53 PM
there is not an element with ID: displayresults

sangren
10-18-2005, 08:25 PM
Thanks, guys, I certainly do appreciate the assistance. KC, can you show me exactly how you changed the code to integrate the innerHTML command? Thanks again!

KC-Luck
10-18-2005, 08:29 PM
certainly

<html>
<head>
<title>A CD Catalog</title>
<script type="text/javaScript">
var xmlDoc;
if (window.ActiveXObject) {xmlDoc = new ActiveXObject("Microsoft.XMLDOM");}
else if (document.implementation && document.implementation.createDocument) {xmlDoc = document.implementation.createDocument("","doc",null);}
xmlDoc.async = false;
xmlDoc.load("cdcatalog.xml");

function ProcessXML()
{
var catalog = xmlDoc.getElementsByTagName("catalog")[0]; // First catalog.
var cds = catalog.getElementsByTagName("cd"); // All titles in catalog.
var results = '';
for (var i=0; cds.length > i; i++)
{
var Title = cds[i].getElementsByTagName("title");
var Artist = cds[i].getElementsByTagName("artist");
results += i+1 + "." + Title[0].firstChild.nodeValue +
" performed by " + Artist[0].firstChild.nodeValue + "<br/>\r\n";
}
document.getElementById("displayresults").innerHTML = results;
}
</script>
</head>
<body onload="ProcessXML()">
<div id="displayresults"></div>
</body>
</html>

sangren
10-18-2005, 08:45 PM
Thanks again, KC. I certainly appreciate the assistance. I am relatively new to XML and Javascript and that had me stumped, although it is pretty obvious once I see the solution. Thank you again!

sangren
10-19-2005, 07:22 PM
One more question.. how would I change the text color using the document.fgcolor property? In other words, where would I place that command?

sangren
10-19-2005, 07:36 PM
I found my answer. I need to place a text tag in the body section. Thanks!

sangren
10-19-2005, 07:51 PM
One more.. if I wanted to change the color of the text for just the artist tag, where would I place the code, if it is possible?

KC-Luck
10-19-2005, 09:21 PM
results += i+1 + ". <span class=\"title\">" + Title[0].firstChild.nodeValue +"</span>"+

then you could put in your css stylesheet


<style>
.title {color:blue;}
</style>

sangren
10-20-2005, 04:27 PM
Could it be done without a css stylesheet, just using the javascript?

rm-f
10-20-2005, 05:19 PM
sangren,

it is better that you post questions related to another problem to different thread. More people would be able to help you.