Loading XML into an HTML file using JavaScript

[bbq9000]

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.

[TinKim]

Take a look at YUI, the YAHOO User Interface. It has several datamanagement components and a comfortable, but simple to learn AJAX-component. You will find everything you need there.

--
www.youngvisions.net