CODEWITHSUNDEEP
javascriptxml
Cody_T
Cody_T

Reputation: 81

Using javascript to show xml info in html webpage

I want to make a quiz on my website, and I want the questions and answer to be stored in a xml file. This is the xml file:

<?xml version="1.0" ?>
<easy>
<question>
    <Questionn>What does the female child Walker pick up in the begining of the episode?</Questionn>
    <answer answer="a1">A Doll</answer>
    <answer answer="a2">A Book</answer>
</question>
<question>
    <Questionn>What is the name of the man who woke up from a coma?</Questionn>
    <answer answer="b1">Josh</answer>
    <answer answer="b2">Rick</answer>
</question>
</easy>

In my test page I am just wanting to list all the questions in the file. Here is my javascript code:

<script>
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","s1e1.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("question");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("Questionn")[0].childNodes[0].nodeValue);
  document.write("</td>");
  document.write("</tr>");
  }
document.write("</table>");
</script>

But it not working. Any ideas?

Upvotes: 0

Views: 102

Answers (2)

0gyob0
0gyob0

Reputation: 36

There are weird differences between how browsers implement xml with javascript. It takes time to learn the differences and work around them. There are also performance tricks to be gained in some cases, but who wants to learn all that when Jquery already knows them? To get your work done faster, and in a way that works with more browsers, try using jquery. I made an example for you, where I hardcode the XML into a variable instead of grabbing it from a separate file.

Here is the example I made for you:

http://jsfiddle.net/TBaS6/2/

var xmlString='';
//normally get your data this way:
//$.ajax({
//    type: "GET",
//    url: "something.xml",
//    dataType: "xml",
//    success: function (xml) {
//xmlString = xml;
//    }
//});

//for this example I will hardcode your xml with this line of code, though. Maybe you want to do it this way in the future, maybe not:
xmlString='<?xml version="1.0" ?><easy><question>    <Questionn>What does the female child Walker pick up in the begining of the episode?</Questionn>    <answer answer="a1">A Doll</answer>    <answer answer="a2">A Book</answer></question><question>    <Questionn>What is the name of the man who woke up from a coma?</Questionn>    <answer answer="b1">Josh</answer>    <answer answer="b2">Rick</answer></question></easy>';

var XML_DATA = jQuery.parseXML(xmlString);

var HTML_OUT="<table border='1'>";


    $('Questionn', XML_DATA).each(function(){
        HTML_OUT +="<tr><td>";
       HTML_OUT+= $(this).text();
       HTML_OUT+="</td>";
       HTML_OUT+="</tr>";
    });

HTML_OUT+="</table>";


$('body').html(HTML_OUT);

note: http://www.w3schools.com/jquery/jquery_install.asp

Upvotes: -1

Quentin
Quentin

Reputation: 943759

Your code works when I test it. This strongly implies that the problem is: you are testing it by loading the HTML document from your file system instead of over HTTP and are running into the security restrictions that browsers impose on XMLHttpRequest (most browsers do not allow it to access your hard disk).

Install a web server.

Upvotes: 1

Related Questions