CODEWITHSUNDEEP
javascriptxml
The Walrus469
The Walrus469

Reputation: 143

Javascript XML parsing not working

I'm nearing my wits' end here on what should be a simple problem. I'm trying to use javascript to parse and return values from a very simple XML document to a very simple HTML document. My problem is that my script refuses to do this. The XML: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<root>
<man>
  <name>Nicholas</name>
</man>
<man>
  <name>Peter</name>
</man>
</root>

This is strictly for my own education, hence the purposeless tags.

The JavaScript:

<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","dname",false);
xmlhttp.send();
return xmlhttp.responseXML; 
}

xmlDoc =     loadXMLDoc("https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test4.xml");

x = xmldoc.getElementsByTagName("name");

var content = function()
{
    document.write(x[0].childNodes[0].nodeValue);
};
</script>

Note that I'm using my Dropbox public folder to enable the HTTP-fetching part of the code. All these files are located in the same directory.

The (relevant) HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test3.css" rel="stylesheet" type="text/css" />
<body>
<button type="button" onclick="content()">Click Me</button>
<body>

Also note that when I click the button, ostensibly firing the content() function, nothing happens--it's not a matter of everything being overwritten.

Other relevant information: --I'm testing this in Google Chrome --I lifted much of this code (again, learning purposes only) from the W3Schools XML-parsing demo and from another StackOverflow post from a user with a similar problem to mine. In both cases the code ran fine; it's only when I attempt to run it that things gum up. --I'm fairly new to Javascript and the XML DOM, so it's entirely possible that I made an elementary error somewhere.

I'd appreciate any help the community can provide.

Upvotes: 2

Views: 1802

Answers (3)

Vignesh
Vignesh

Reputation: 1518

USe ctrl+shift+j key in firefox to see errors, if you use firebug, go to "NET" menu tab in firebug there you can able to see request and response or any error.

To know more about xml parsing Have a look on this site XML DOM

Upvotes: 0

faino
faino

Reputation: 3224

Here is a bit more unobtrusive way to approach parsing XML into your document, as well as an error fall back:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>XML Example</title>
        <meta charset="UTF-8" />
        <script>
            function content(dname) {
                var xhttp = null, xml = null, names = null, html = "", output = document.getElementById("output");
                output.innerHTML = "Loading...";
                if(window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if(!xhttp) {
                    output.innerHTML = "Failed to make the request!";
                } else {
                    xhttp.open("GET", dname, false);
                    xhttp.send();
                    xml = xhttp.responseXML;
                    names = xml.getElementsByTagName("name");
                    for(var i = 0, len = names.length; i < len; i++) {
                        html += names[i].childNodes[0].nodeValue + "<br />";
                    }
                    output.innerHTML = html;
                }
            }
            window.onload = function(){
                document.getElementById("button").onclick = function(){
                    content("https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test4.xml");
                };
            };
        </script>
    </head>
    <body>
        <button type="button" id="button">Click Me</button>
        <div id="output"></div>
    </body>
</html>

Upvotes: 0

GotDibbs
GotDibbs

Reputation: 3167

For starters, have you tried looking at the built in debugging tools (called developer tools) it offers? See here for a basic intro: https://developers.google.com/chrome-developer-tools/. If you open up the developer tools as mentioned in the link, the code you've posted spits out a couple of errors along the way into the Console tab.

Your two issues with the code that the developer tools would show for you:

  • When you attempt to access your variable xmlDoc you have cased it incorrectly.
  • In your loadXMLDoc function your open call is requesting a relative resource called "dname" (as a string), what it looks like you're trying to do is actually use the variable dname.

A corrected version would therefore be:

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",dname,false);
xmlhttp.send();
return xmlhttp.responseXML; 
}

xmlDoc =     loadXMLDoc("https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test4.xml");

x = xmlDoc.getElementsByTagName("name");

var content = function()
{
    document.write(x[0].childNodes[0].nodeValue);
};

Upvotes: 2

Related Questions