Parse xml file onclick

Katpal · June 29, 2012, 11:28am

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


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

<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 PC’s 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

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.

system · June 29, 2012, 1:15pm

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.


<!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); [COLOR=#ff0000][B]//for testing[/B][/COLOR] - 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&#8217;s as Instructional Tools</li>
        </ol>
    </body>
</html>

testXML.xml


<?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


<?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>

Katpal · June 30, 2012, 12:15pm

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

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 PC’s 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 PC’s 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>

system · June 30, 2012, 9:44pm

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.


<!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);
                [COLOR=#ff0000]document.getElementById('pResults').innerHTML = xml.getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue;[/COLOR]
            }
            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();
                [COLOR=#ff0000]getName('testXML_3.xml');[/COLOR]
            }
        </script>
    </head>
    <body>
        <ol id="results_list">
            <li id="testXML.xml">Teaching with Tablet PC's</li>
            <li id="testXML2.xml">Tablet PC&#8217;s as Instructional Tools</li>
        </ol>
        [COLOR=#ff0000]<p id="pResults"></p>[/COLOR]
    </body>
</html>

testXML_3.xml


<?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>