www.webdeveloper.com
Results 1 to 2 of 2

Thread: Loading XML into an HTML file using JavaScript

  1. #1
    Join Date
    Sep 2009
    Posts
    8

    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.

  2. #2
    Join Date
    Sep 2009
    Location
    Kiel, Germany
    Posts
    21
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles