SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Greece
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    parse xml file onclick

    Hi to all,
    I am trying to load a different xml file everytime a link is clicked, based on its href.
    I have the following in head:

    JAVASCRIPT


    Code:
    window.onload=function() {
    loadXMLDoc("papers.xml"); // loads the default xml file so that page is not empty
    }
    
    function scanForXML(){
    var extLinks=document.getElementById('results_list').getElementsByTagName('a');
    for (i=0; i<extLinks.length; i++) {
    extLinks[i].onclick=function getName()
    {
    var fileName=this.getAttribute('href');
    loadXMLDoc(fileName);
    return false;
    }
    }
    }

    HTML
    HTML Code:
    <ol id="results_list">
    <li> <a class="tooltip" href="paper2.xml"> Teaching with Tablet PC's </a></li>
    <li> <a href="paper3.xml" class="tooltip"> Tablet PCs as Instructional Tools </a></li>
    </ol>
    The onclick event works, I get the href value but the new xmlFile does not get loaded.
    Any ideas why?

    ps: no jquery plz, cannot use that. trying to learn better basic javascript


    sorry here is the load code - by the way it does not work in chrome and opera - but works (the default xml file gets loaded) in safari and FF


    Code:
    function loadXMLDoc(dname)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET",dname,false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    }
    Thanks!
    K.

  2. #2
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I don't like using href the way you have. href is meant to be used for navigating to a url.

    This works using the following test XML data files. You can style the <li>s to make them look like links when you hover on them.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #results_list li:hover {
                    cursor: pointer;
                }
            </style>
            <script type="text/javascript">
                function loadXMLDoc(dname){
                    if (window.XMLHttpRequest){
                        xhttp=new XMLHttpRequest();
                    } else {
                        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xhttp.open("GET",dname,false);
                    xhttp.send("");
                    return xhttp.responseXML;
                }
                function getName(filename){
                    var xml = loadXMLDoc(filename);
                    alert(xml.getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue); //for testing - alerts "Arcade Fire" and "Arcade Fire XX"
                }
                function scanForXML(){
                    var extLinks=document.getElementById('results_list').getElementsByTagName('li');
                    for (i=0; i<extLinks.length; i++) {
                        extLinks[i].onclick=function() { 
                            getName(this.id);
                        }
                    }
                }
                window.onload=function() {
                    scanForXML(); 
                }
            </script>
        </head>
        <body>
            <ol id="results_list">
                <li id="testXML.xml">Teaching with Tablet PC's</li>
                <li id="testXML2.xml">Tablet PC’s as Instructional Tools</li>
            </ol>
        </body>
    </html>
    testXML.xml

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
        <CATALOG>
            <BAND>
                <ARTIST>Arcade Fire</ARTIST>
                <COUNTRY>Canada</COUNTRY>
                <ALBUM>
                    <TITLE>Funeral</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>Neon Bible</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>The Suburbs</TITLE>
                </ALBUM>
            </BAND>
            <BAND>
                <ARTIST>Moby</ARTIST>
                <COUNTRY>United States</COUNTRY>
                <ALBUM>
                    <TITLE>Play</TITLE>
                </ALBUM>
            </BAND>
            <BAND>
                <ARTIST>U2</ARTIST>
                <COUNTRY>Ireland</COUNTRY>
                <ALBUM>
                    <TITLE>War</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>October</TITLE>
                </ALBUM>
            </BAND>
        </CATALOG>
    </root>
    testXML2.xml

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
        <CATALOG>
            <BAND>
                <ARTIST>Arcade Fire XX</ARTIST>
                <COUNTRY>Canada</COUNTRY>
                <ALBUM>
                    <TITLE>Funeral</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>Neon Bible</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>The Suburbs</TITLE>
                </ALBUM>
            </BAND>
            <BAND>
                <ARTIST>Moby</ARTIST>
                <COUNTRY>United States</COUNTRY>
                <ALBUM>
                    <TITLE>Play</TITLE>
                </ALBUM>
            </BAND>
            <BAND>
                <ARTIST>U2</ARTIST>
                <COUNTRY>Ireland</COUNTRY>
                <ALBUM>
                    <TITLE>War</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>October</TITLE>
                </ALBUM>
            </BAND>
        </CATALOG>
    </root>

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Greece
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the respons
    however I am sorry, i am now completely confused (

    a. the default xml file gets loaded ONLY in FF (safari, chrome and opera do not load it ...)
    b. the variable 'filename' is detected correctly (thanks for indicating the 'li' element usage as opposed to the 'a' element) BUT
    c. the LoadAgain function gets up to the alert ("the file " + filename + " has been loaded "); part and then
    d. does not do anything (does not load the title and header)

    here is how my code is currently:

    External Javascript file:
    ------------------------------
    function loadXMLDoc(dname)
    {
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET",dname,false);
    xmlhttp.send("");
    xmlDoc=xmlhttp.responseXML;
    }

    function get_set_Data () {

    var title=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
    var author=xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
    //geting the specific nodes values

    document.getElementById("header").getElementsByTagName('h1')[0].innerHTML= title;
    document.getElementById("header").getElementsByTagName('h6')[0].innerHTML= author;

    //setting the specific nodes values in HTML elements

    //there are few more functions in the JS file that are irrelevant for the purpose of this exercise

    HTML FILE and more in-html JAVASCRIPT
    ------------------------------------------------------------

    <script type="text/javascript">

    window.onload=function(){
    loadXMLDoc("papers.xml"); //this loads the default XML file i.e. paper1
    get_set_Data();
    scan();
    scanForXML();
    highlite();
    }

    function LoadAgain(filename){
    var xml = loadXMLDoc(filename);
    alert ("the file " + filename + " has been loaded ");
    alert(xml.getElementsByTagName("title")[0].childNodes[0].nodeValue); //copied from above for testing - does not work
    return false;
    }

    function scanForXML(){
    var extLinks=document.getElementById('results_list').getElementsByTagName('li');
    for (i=0; i<extLinks.length; i++) {
    extLinks[i].onclick=function()
    {
    LoadAgain(this.id);
    return false;
    alert(this.id);

    }
    }
    }
    </script>
    and then the pure HTML part (some of it):


    HTML
    ------------------------------

    <div id="header">
    <h1> title </h1>
    <h6> author </h6>
    </div>

    <div id="text_content">
    <h4>Search Results</h4>
    <ol id="results_list">
    <li id="paper2.xml">
    <a class="tooltip" href="paper2.xml">Teaching with Tablet PC's </a>
    </li>
    <li id="paper3.xml">
    <a href="paper3.xml" class="tooltip">Tablet PCs as Instructional Tools </a>
    </li>
    <li id="paper4.xml">
    <a href="#" class="tooltip">Improving learning via CS1 </a></li>
    </ol>
    </div>

    -----------
    Samples from 3 different XML files:

    papers.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <CATALOG>
    <paper>
    <title>TEACHING WITH TABLET PC'S</title>
    <author>Kenrick Mock [ 2004 ]</author>
    </paper>
    </CATALOG>

    paper2.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <CATALOG>
    <paper>
    <title>Tablet PCs as Instructional Tools or the Pen is Mightier than the Board!</title>
    <author>Cheryl L. Willis</author>
    </paper>
    </CATALOG>

    paper3.xml
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <CATALOG>
    <paper>
    <title>Learning in CS1 via Tablet-PC-based In-Class Assessment</title>
    <author>Kimberle Koile</author>
    </paper>
    </CATALOG>

  4. #4
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Katpal View Post
    Hi thanks for the respons
    however I am sorry, i am now completely confused (

    a. the default xml file gets loaded ONLY in FF (safari, chrome and opera do not load it ...)
    b. the variable 'filename' is detected correctly (thanks for indicating the 'li' element usage as opposed to the 'a' element) BUT
    c. the LoadAgain function gets up to the alert ("the file " + filename + " has been loaded "); part and then
    d. does not do anything (does not load the title and header)
    l
    You have too much code for me to go through and debug.

    The example I posted works fine in all the major browsers including safari, chrome and opera.

    In the example, I have now added a default xml file (testXML_3.xml) and the value of the first author is read from the default xml file in window.onload() via getName() and outputed to a <p>.

    Then when you click either of the other 2 <li>s, the html in the <p> is replaced by the value of the first author in the xml file "attached" to the clicked <li>.

    The code below works in all of the above browsers.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #results_list li:hover {
                    cursor: pointer;
                }
            </style>
            <script type="text/javascript">
                function loadXMLDoc(dname){
                    if (window.XMLHttpRequest){
                        xhttp=new XMLHttpRequest();
                    } else {
                        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xhttp.open("GET",dname,false);
                    xhttp.send("");
                    return xhttp.responseXML;
                }
                function getName(filename){
                    var xml = loadXMLDoc(filename);
                    document.getElementById('pResults').innerHTML = xml.getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue;
                }
                function scanForXML(){
                    var extLinks=document.getElementById('results_list').getElementsByTagName('li');
                    for (i=0; i<extLinks.length; i++) {
                        extLinks[i].onclick=function() { 
                            getName(this.id);
                        }
                    }
                }
                window.onload=function() {
                    scanForXML();
                    getName('testXML_3.xml');
                }
            </script>
        </head>
        <body>
            <ol id="results_list">
                <li id="testXML.xml">Teaching with Tablet PC's</li>
                <li id="testXML2.xml">Tablet PC’s as Instructional Tools</li>
            </ol>
            <p id="pResults"></p>
        </body>
    </html>
    testXML_3.xml

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
        <CATALOG>
            <BAND>
                <ARTIST>Arcade Fire (Default)</ARTIST>
                <COUNTRY>Canada</COUNTRY>
                <ALBUM>
                    <TITLE>Funeral</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>Neon Bible</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>The Suburbs</TITLE>
                </ALBUM>
            </BAND>
            <BAND>
                <ARTIST>Moby</ARTIST>
                <COUNTRY>United States</COUNTRY>
                <ALBUM>
                    <TITLE>Play</TITLE>
                </ALBUM>
            </BAND>
            <BAND>
                <ARTIST>U2</ARTIST>
                <COUNTRY>Ireland</COUNTRY>
                <ALBUM>
                    <TITLE>War</TITLE>
                </ALBUM>
                <ALBUM>
                    <TITLE>October</TITLE>
                </ALBUM>
            </BAND>
        </CATALOG>
    </root>


Tags for this Thread

Bookmarks

Posting Permissions

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