Loading XML into an HTML file using JavaScript

Hi,

I'm currently working on my portfolio website and would like to have information about my movie clips be retrieved from an XML document when a thumbnail is clicked. I am building my website in HTML and would like to retrieve the Xml using JavaScript. Any help would be appreciated.

My XML is valid and structured as such:


<?xml version="1.0" encoding="UTF-8"?>
<work>

<motion>

<reel>
<title id="Demo Reel 2009" project="Self Promotion" client="Self">
<![CDATA[This demo reel is primaraly a collection ......]]>
</title>
</reel>
.
.
.
.


These are my initial variable definitions and readXML function in javascript:


<script language="javascript">

var xmldom, workNode, motionNode, printNode, fineartNode, displayNode, titleNode;


function readXMLDocument()
{

xmldom=createDocument();
xmldom.async=false;


if (xmldom.parseError != 0) {
alert("An error occurred: \nError Code " + xmldom.parseError.errorCode + "\n" + "Line: " + xmldom.parseError.line + "\n" + "Line Pos: " + xmldom.parseError.linepos + "\n" + "Reason: " + xmldom.parseError.reason);
} else {
alert("Document: " + xmldom.documentElement);
alert("Root: " + xmldom.documentElement.tagName);
alert("Child: " + xmldom.documentElement.firstChild.tagName);
alert("Xml DOM: " + xmldom.xml);
}


xmldom.load("workinfo.xml");


workNode=xmldom.documentElement;

motionNode=workNode.firstChild;

printNode=motionNode.nextSibling;

fineartNode=printNode.nextSibling;
}
.
.
.
.



A call to function revealText is called "onClick" of a thumbnail as such:


<a href="videopages/reel.html" class="vid" target="video" onClick="revealText(0)">


This is function revealText:


function revealText(x)
{
var title, project, client, info;

readXMLDocument();

displayNode=motionNode.childNode[x];


titleNode=displayNode.firstChild;


title=titleNode.getAttribute("id");
project=titleNode.getAttribute("project");
client=titleNode.getAttribute("client");
info=titleNode.getNodeValue();

titleSpan.innerHTML=title;
projectSpan.innerHTML=project;
clientSpan.innerHTML=client;
infoSpan.innerHTML=info;
}
</script>

and these are the spans they are written to:


<span id="titleSpan" class="vidinfo">

<span id="projectSpan" class="vidinfo">

<span id="clientSpan" class="vidinfo">

<p id="infoSpan" class="content">


If you have read this far, I REALLLLY appreciate it. And any ideas as to what is wrong would help alot.

 

I've found that generally when debugging a problem like this, it is best to recreate the problem using a smaller
subset of data. In your case, why not create a xml document with one record, and one field, then check to
make sure your javascript code can get that one value. Keep in mind too, if you are able to slim down the code
to just a few lines of code, it'll be much easier to spot the problem as well as having others help you.

 

I think the following sites will help you:
XMLDocument object, XMLHttpRequest object.