Parsing xml : need a little tip

ok,

I got this xml file component that needs to be displayed in a specific div in my html:

I got this code:

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

x=xmlDoc.getElementsByTagName("tousCours");
i=0;

function displayCours(){
var y=xmlDoc.getElementsByTagName("cours")
for (j=0;j<=y.length;i++)
{

sigle=(x[i].getElementsByTagName("sigle")[0].childNodes[0].nodeValue);
titre=(x[i].getElementsByTagName("titre")[0].childNodes[0].nodeValue);
txt='<div class="cours3">'+ sigle +'<br />'+ titre +'</div>'
document.getElementById("cours2").innerHTML=txt;

}}

Code (markup):

It only returns one element of the xml sheet instead of returning all elements "cours"

What is wrong in my loop ?

 

I think this line is the problem. Change j to i and see what happens
for (j=0;j<=y.length;i++)

But why does "i" need to be initialized in the line above? Should remove that if it's not required.

 

The above is correct but you also have not called the function 'displayCours()' at any stage and since your request is not asynchronous then this should work:

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

x=xmlDoc.getElementsByTagName("tousCours");

var y=xmlDoc.getElementsByTagName("cours");
for (var i=0;i<=y.length;i++)
{

sigle=(x[i].getElementsByTagName("sigle")[0].childNodes[0].nodeValue);
titre=(x[i].getElementsByTagName("titre")[0].childNodes[0].nodeValue);
txt='<div class="cours3">'+ sigle +'<br />'+ titre +'</div>';
document.getElementById("cours2").innerHTML=txt;

}

Code (markup):

The "false" value in this line:

xmlhttp.open("GET","cours2.xml",false);

Code (markup):

means that code will not continue to execute until the file has been retrieved. This is what I mean by your call is not 'asynchronous'. Therefore there is no need to have an "onreadystatechange" function. The downside of this is that the browser will have a slight pause where it will "freeze" while retrieving the document. The length of this "freeze" will depend on the size of the XML file that you are retrieving. If this doesn't affect the purpose for which you are using it then it is fine. Otherwise your code will have to be altered to allow for asynchronous retrieval (easily done, just let us know if this is a problem).

 

This is my xml:

<tousCours>

<cours>
    <sigle>INF1173</sigle>
    <titre>Analyse et gestion des exigences</titre>
    <prgs>
      <pr>0542</pr>
	  <pr>4108</pr>
	  <pr>4802</pr>
	  <pr>7033</pr>
	  <pr>7833</pr>
    </prgs>
    <trdir>Oui</trdir>
  </cours>
 <cours>
    <sigle>INF1453</sigle>
    <titre>Technologie du commerce électronique</titre>
    <prgs>
      <pr>0542</pr>
	  <pr>4802</pr>
	  <pr>7033</pr>
	  <pr>7643</pr>
	  <pr>7833</pr>
    </prgs>
    <trdir>Oui</trdir>
  </cours>

</tousCours>

Code (markup):

This is my javascript:

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","trimestre.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
var x=xmlDoc.getElementsByTagName("cours");

function displayCours(){
document.write("<ul class='list'>");
for (i=0;i<x.length;i++)
{
document.write("<li onclick='displayInfo(" + i + ")' class='cours3'>");
document.write(x[i].getElementsByTagName("sigle")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(x[i].getElementsByTagName("titre")[0].childNodes[0].nodeValue);
document.write("</li>");
document.write("<li onclick='displayInfo(" + i + ")' class='cours4'>");
document.write(x[i].getElementsByTagName("sigle")[0].childNodes[0].nodeValue + '&nbsp;TD');
document.write("<br />");
document.write(x[i].getElementsByTagName("titre")[0].childNodes[0].nodeValue);
document.write("</li>");

}
document.write("</ul>");

}

function displayInfo(i){
{
sigle=(x[i].getElementsByTagName("sigle")[0].childNodes[0].nodeValue);
titre=(x[i].getElementsByTagName("titre")[0].childNodes[0].nodeValue);
progs = (x[i].getElementsByTagName("pr")[0].childnodes[0].nodeValue);
trdir=(x[i].getElementsByTagName("trdir")[0].childNodes[0].nodeValue);
txt="Sigle: "+sigle+"<br />"+titre+"<br />Programmes: "+progs+"<br />Travaux Diriges: "+trdir+"<br /><br/>";
document.getElementById("info").innerHTML=txt;
}


}

Code (markup):

If you see function displaycours generate a li with onclick action. The onclick is my second function which is displayInfo. This works all great except that the display info of the "progs" variable only shows the first element of the the called "pr" tag. If you look at the xml, there is multiple "pr" in a "cours" element. How to display all of these pr at once ? Is it with a for instructions ? I have tried without luck.

Thanks in advanced.