...

View Full Version : XML and Javascript



sangren
10-18-2005, 03: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, 08: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, 08:53 PM
there is not an element with ID: displayresults

sangren
10-18-2005, 09: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, 09: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, 09: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, 08: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, 08:36 PM
I found my answer. I need to place a text tag in the body section. Thanks!

sangren
10-19-2005, 08: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, 10: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, 05:27 PM
Could it be done without a css stylesheet, just using the javascript?

rm-f
10-20-2005, 06: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum