resultat de requete ajax

alen22 · 07/04/2011, 13h09

salut,

je suis actuellement entrein de realiser de code en javascript qui permet d'afficher de donner depuis un fichier test.xml

le contenu de ce fichier est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<donnees>
<categorie titre="Catégorie 1">
<donnee texte="Donnée A" valeur="15"></donnee>
</categorie>
<categorie titre="Catégorie 2">
<donnee texte="Donnée B" valeur="2"></donnee>
<donnee texte="Donnée C" valeur="3"></donnee>
<donnee texte="Donnée D" valeur="4"></donnee>
</categorie>
<categorie titre="Catégorie 3">
<donnee texte="Donnée E" valeur="5"></donnee>
<donnee texte="Donnée F" valeur="6"></donnee>
<donnee texte="Donnée G" valeur="7"></donnee>
<donnee texte="Donnée H" valeur="8"></donnee>
<donnee texte="Donnée I" valeur="9"></donnee>
</categorie>
</donnees>

le code de la page jsp est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
      <title>ma page de test</title>
      <meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
 
 
 
 <style type='text/css'>
 
#affichageData{
               width: 200px;
               background-color: #F3F9FE;
}
.categorie {
         color: #21536A;
         border: 1px solid;
         background-color: #EAEEEE;
         padding: 4px;
         font-family: Verdana;
         font-size: 11px;
         border-color: #FEFEFE #C3C8CB #C3C8CB;
         margin: 0px;
         text-decoration: none;
         padding-left: 3px;
}
.donnee {
          font-family: Verdana;
          font-size: 10px;
          padding-top: 3px;
          padding-bottom: 4px;
          padding-left: 20px;
          border-right: 1px solid #C3C8CB;
          border-left: 1px solid #C3C8CB;
          border-bottom: 1px solid #C3C8CB;
}
 
</style>
 
 
 
 
 
<script type="text/javascript">
 
function lancer(url){
         setInterval("regen_data(url)",300);
}
var ie5 = (document.getElementById && document.all);
function setXML(xmldocument){
         var k = 0;
         var categorie = xmldocument.getElementsByTagName('categorie');
 
         if(document.getElementById('themaindiv')){
           var x = document.getElementById('themaindiv');
           x.parentNode.removeChild(x);
         }else{
               var themaindiv = document.createElement('div');
               themaindiv.setAttribute("id","themaindiv");
               document.getElementById('affichageData').appendChild(themaindiv);
         }
 
         for (var i=0;i<categorie.length;i++){
             var mydiv = document.createElement('div');
             var attributs = categorie[i].attributes;
             var txt = attributs.getNamedItem("titre").nodeValue;
             mydiv.appendChild(document.createTextNode(">> " + txt));
             if(ie5){
               mydiv.style.cssText = 'width: 100%';
             }
             ie5?mydiv.setAttribute("className", "categorie"):mydiv.setAttribute("class", "categorie");
             /*document.getElementById('affichageData').appendChild(mydiv);*/
             themaindiv.appendChild(mydiv);
             mydiv.setAttribute("id", "categorie" + i);
 
             var mysecdiv = document.createElement('div');
             mysecdiv.setAttribute("id", "sub" + i);
             ie5?mysecdiv.setAttribute("className", "donnee"):mysecdiv.setAttribute("class", "donnee");
             mysecdiv.style.cssText = 'display:block;';
             /*document.getElementById('affichageData').appendChild(mysecdiv);*/
             themaindiv.appendChild(mysecdiv);
 
             var mydata = categorie[i].getElementsByTagName('donnee');
             for (var j=0;j<mydata.length;j++){
                 var attributs= mydata[j].attributes;
                 var txt = attributs.getNamedItem("texte").nodeValue;
                 var valeur = attributs.getNamedItem("valeur").nodeValue;
                 var spn1 = document.createElement('span');
                 spn1.appendChild(document.createTextNode(txt + " : "));
                 var spn2 = document.createElement('span');
                 spn2.appendChild(document.createTextNode(valeur));
                 spn2.setAttribute("id","donnee"+k);
                 k++;
                 mysecdiv.appendChild(spn1);
                 mysecdiv.appendChild(spn2);
                 var b = document.createElement('br');
                 mysecdiv.appendChild(b);
             }
 
         }
}
function resetXML(xmldocument){
         var lesdonnees = xmldocument.getElementsByTagName('donnee');
         for(var l=0;l<lesdonnees.length;l++){
                 document.getElementById('donnee'+l).innerHTML = lesdonnees[l].attributes.getNamedItem("valeur").nodeValue;
         }
}
 
var xhr = null;
function gen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          setXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}
function regen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          resetXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}
 
  </script>
 
 
 
 
</head>
 
<body>
<input type="button" onClick="gen_data('test.xml');" value="Générer" /><br /><br />
<input type="button" onClick="lancer('test.xml');" value="Mise à jour en boucle" /><br /><br />
<div id="affichageData"></div>
</body>
</html>

En deux mots, en lançant ce script, l'utilisateur arrive sur une page avec 2 boutons : un bouton "Générer" et un bouton "Mise à jour en continue".
Le premier va lire le fichier XML myxml.xml une première fois, et construit un tableau dynamiquement en fonction de sa structure (cf. myxml.xml : catégories et données).
Une fois le tableau construit, le deuxième bouton permet de lancer la mise à jour en continue, durant laquelle seules les "valeurs" des "données" seront mises à jour, et durant laquelle la structure du tableau est laissée intacte.

ce code est exécute avec sucée et il m'affiche un resultat qui correspond au contenu de fichier test.xml suite au clique au bouton "Générer"

mais mon problème actuelle est quand je change le fichier test.xml et je le rend comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="UTF-8"?>
<donnees>
<categorie>
<titre>Catégorie 1</titre>>
<donnee>
<texte>Donnée A</texte>
<valeur>15</valeur>
</donnee>
</categorie>
<categorie>
<titre>Catégorie 2</titre>>
<donnee>
<texte>Donnée B</texte>
<valeur>2</valeur>	
</donnee>
<donnee>
<texte>Donnée C</texte>
<valeur>3</valeur>
</donnee>
<donnee>
<texte>Donnée D</texte>
<valeur>4</valeur>
</donnee>
</categorie>
<categorie>
<titre>Catégorie 3</titre>>
<donnee>
<texte>Donnée E</texte>
<valeur>5</valeur>
</donnee>
<donnee>
<texte>Donnée F</texte>
<valeur>6</valeur>
</donnee>
<donnee>
<texte>Donnée G</texte>
<valeur>7</valeur>
</donnee>
<donnee>
<texte>Donnée H</texte>
<valeur>8</valeur>
</donnee>
<donnee>
<texte>Donnée I</texte>
<valeur>9</valeur>
</donnee>
</categorie>
</donnees>

il n'a rien afficher

je compris que la structure du second fichier XML different du premier, donc c'est normal que le programme conçu pour exploiter la première version du fichier XMl, n'arrive pas à exploiter la deuxième version du fichier XML.

c'est pour cela de changer le code et le rend comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
      <title>ma page de test</title>
      <meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
 
 
 
 <style type='text/css'>
 
#affichageData{
               width: 200px;
               background-color: #F3F9FE;
}
.categorie {
         color: #21536A;
         border: 1px solid;
         background-color: #EAEEEE;
         padding: 4px;
         font-family: Verdana;
         font-size: 11px;
         border-color: #FEFEFE #C3C8CB #C3C8CB;
         margin: 0px;
         text-decoration: none;
         padding-left: 3px;
}
.donnee {
          font-family: Verdana;
          font-size: 10px;
          padding-top: 3px;
          padding-bottom: 4px;
          padding-left: 20px;
          border-right: 1px solid #C3C8CB;
          border-left: 1px solid #C3C8CB;
          border-bottom: 1px solid #C3C8CB;
}
 
</style>
 
 
 
<script type="text/javascript">
 
 
      function lancer(url){
               setInterval("regen_data(url)",300);
      }
      var ie5 = (document.getElementById && document.all);
      function setXML(xmldocument){
               var k = 0;
               var categorie = xmldocument.getElementsByTagName('categorie');
 
               if(document.getElementById('themaindiv')){
                 var x = document.getElementById('themaindiv');
                 x.parentNode.removeChild(x);
               }else{
                     var themaindiv = document.createElement('div');
                     themaindiv.setAttribute("id","themaindiv");
                     document.getElementById('affichageData').appendChild(themaindiv);
               }
 
               for (var i=0;i<categorie.length;i++){
                   var mydiv = document.createElement('div');
                   var attributs = categorie[i].attributes;
                   var txt = attributs.getElementsByTagName("titre")[0].nodeValue;
                   mydiv.appendChild(document.createTextNode(">> " + txt));
                   if(ie5){
                     mydiv.style.cssText = 'width: 100%';
                   }
                   ie5?mydiv.setAttribute("className", "categorie"):mydiv.setAttribute("class", "categorie");
                   /*document.getElementById('affichageData').appendChild(mydiv);*/
                   themaindiv.appendChild(mydiv);
                   mydiv.setAttribute("id", "categorie" + i);
 
                   var mysecdiv = document.createElement('div');
                   mysecdiv.setAttribute("id", "sub" + i);
                   ie5?mysecdiv.setAttribute("className", "donnee"):mysecdiv.setAttribute("class", "donnee");
                   mysecdiv.style.cssText = 'display:block;';
                   /*document.getElementById('affichageData').appendChild(mysecdiv);*/
                   themaindiv.appendChild(mysecdiv);
 
                   var mydata = categorie[i].getElementsByTagName('donnee');
                   for (var j=0;j<mydata.length;j++){
                       var attributs= mydata[j].attributes;
                       var txt = attributs.getElementsByTagName("texte")[0].nodeValue;   
                       var valeur = attributs.getElementsByTagName("valeur")[0].nodeValue;
                       var spn1 = document.createElement('span');
                       spn1.appendChild(document.createTextNode(txt + " : "));
                       var spn2 = document.createElement('span');
                       spn2.appendChild(document.createTextNode(valeur));
                       spn2.setAttribute("id","donnee"+k);
                       k++;
                       mysecdiv.appendChild(spn1);
                       mysecdiv.appendChild(spn2);
                       var b = document.createElement('br');
                       mysecdiv.appendChild(b);
                   }
 
               }
      }
      function resetXML(xmldocument){
               var lesdonnees = xmldocument.getElementsByTagName('donnee');
               for(var l=0;l<lesdonnees.length;l++){
                       document.getElementById('donnee'+l).innerHTML = lesdonnees[l].getElementsByTagName("valeur")[0].nodeValue;
               }
      }
 
      var xhr = null;
      function gen_data(url){
               if(window.XMLHttpRequest) {
                                         xhr = new XMLHttpRequest();
               }else if(window.ActiveXObject){
                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }else{
                     alert("Votre navigateur n'est pas compatible avec AJAX...");
               }
               if(xhr) {
                       xhr.onreadystatechange = function(){
                                              if(xhr.readyState == 4 && xhr.status == 200){
                                                                var xmldocument = xhr.responseXML;
                                                                setXML(xmldocument);
                                              }
                       }
                       xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                       xhr.setRequestHeader("Cache-Control","no-cache");
                       xhr.send(null);
               }
      }
      function regen_data(url){
               if(window.XMLHttpRequest) {
                                         xhr = new XMLHttpRequest();
               }else if(window.ActiveXObject){
                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }else{
                     alert("Votre navigateur n'est pas compatible avec AJAX...");
               }
               if(xhr) {
                       xhr.onreadystatechange = function(){
                                              if(xhr.readyState == 4 && xhr.status == 200){
                                                                var xmldocument = xhr.responseXML;
                                                                resetXML(xmldocument);
                                              }
                       }
                       xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                       xhr.setRequestHeader("Cache-Control","no-cache");
                       xhr.send(null);
               }
      }
 
      </script>
 
 
 
 
 
</head>
 
<body>
<input type="button" onClick="gen_data('test.xml');" value="Générer" /><br /><br />
<input type="button" onClick="lancer('test.xml');" value="Mise à jour en boucle" /><br /><br />
<div id="affichageData"></div>
</body>
</html>

a mon avis le changement dois avoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getNamedItem(...).nodeValue => getElementsByTagName(...)[0].nodeValue

mais ca marche pas

merci d'avance

andry.aime · 08/04/2011, 06h15

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lesdonnees[l].getElementsByTagName("valeur")[0].firstChild.nodeValue

alen22 · 09/04/2011, 13h18

merci pour la réponse

j'applique votre changement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script type="text/javascript">
 
 
      function lancer(url){
               setInterval("regen_data(url)",300);
      }
      var ie5 = (document.getElementById && document.all);
      function setXML(xmldocument){
               var k = 0;
               var categorie = xmldocument.getElementsByTagName('categorie');
 
               if(document.getElementById('themaindiv')){
                 var x = document.getElementById('themaindiv');
                 x.parentNode.removeChild(x);
               }else{
                     var themaindiv = document.createElement('div');
                     themaindiv.setAttribute("id","themaindiv");
                     document.getElementById('affichageData').appendChild(themaindiv);
               }
 
               for (var i=0;i<categorie.length;i++){
                   var mydiv = document.createElement('div');
                   var attributs = categorie[i].attributes;
                   var txt = attributs.getElementsByTagName("titre")[0].nodeValue;
                   mydiv.appendChild(document.createTextNode(">> " + txt));
                   if(ie5){
                     mydiv.style.cssText = 'width: 100%';
                   }
                   ie5?mydiv.setAttribute("className", "categorie"):mydiv.setAttribute("class", "categorie");
                   /*document.getElementById('affichageData').appendChild(mydiv);*/
                   themaindiv.appendChild(mydiv);
                   mydiv.setAttribute("id", "categorie" + i);
 
                   var mysecdiv = document.createElement('div');
                   mysecdiv.setAttribute("id", "sub" + i);
                   ie5?mysecdiv.setAttribute("className", "donnee"):mysecdiv.setAttribute("class", "donnee");
                   mysecdiv.style.cssText = 'display:block;';
                   /*document.getElementById('affichageData').appendChild(mysecdiv);*/
                   themaindiv.appendChild(mysecdiv);
 
                   var mydata = categorie[i].getElementsByTagName('donnee');
                   for (var j=0;j<mydata.length;j++){
                       var attributs= mydata[j].attributes;
                       var txt = attributs.getElementsByTagName("texte")[0].nodeValue;   
                       var valeur = attributs.getElementsByTagName("valeur")[0].nodeValue;
                       var spn1 = document.createElement('span');
                       spn1.appendChild(document.createTextNode(txt + " : "));
                       var spn2 = document.createElement('span');
                       spn2.appendChild(document.createTextNode(valeur));
                       spn2.setAttribute("id","donnee"+k);
                       k++;
                       mysecdiv.appendChild(spn1);
                       mysecdiv.appendChild(spn2);
                       var b = document.createElement('br');
                       mysecdiv.appendChild(b);
                   }
 
               }
      }
      function resetXML(xmldocument){
               var lesdonnees = xmldocument.getElementsByTagName('donnee');
               for(var l=0;l<lesdonnees.length;l++){
                       document.getElementById('donnee'+l).innerHTML = lesdonnees[l].getElementsByTagName("valeur")[0].firstChild.nodeValue;
               }
      }
 
      var xhr = null;
      function gen_data(url){
               if(window.XMLHttpRequest) {
                                         xhr = new XMLHttpRequest();
               }else if(window.ActiveXObject){
                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }else{
                     alert("Votre navigateur n'est pas compatible avec AJAX...");
               }
               if(xhr) {
                       xhr.onreadystatechange = function(){
                                              if(xhr.readyState == 4 && xhr.status == 200){
                                                                var xmldocument = xhr.responseXML;
                                                                setXML(xmldocument);
                                              }
                       }
                       xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                       xhr.setRequestHeader("Cache-Control","no-cache");
                       xhr.send(null);
               }
      }
      function regen_data(url){
               if(window.XMLHttpRequest) {
                                         xhr = new XMLHttpRequest();
               }else if(window.ActiveXObject){
                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }else{
                     alert("Votre navigateur n'est pas compatible avec AJAX...");
               }
               if(xhr) {
                       xhr.onreadystatechange = function(){
                                              if(xhr.readyState == 4 && xhr.status == 200){
                                                                var xmldocument = xhr.responseXML;
                                                                resetXML(xmldocument);
                                              }
                       }
                       xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                       xhr.setRequestHeader("Cache-Control","no-cache");
                       xhr.send(null);
               }
      }
 
      </script>

mais rien n'est affiché

alen22 · 09/04/2011, 13h31

après exécution de la page

avec le console d'erreur de firefox il m'affiche cette erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

attribut.getElementsByTagName is not a function

cette erreur est lié à cette ligne dans le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 var txt = attributs.getElementsByTagName("titre")[0].nodeValue;

nadox · 09/04/2011, 13h35

Bonjour,

Ça fonctionnera surement mieux avec un xml valide :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<titre>Catégorie 1</titre>>

alen22 · 09/04/2011, 13h56

desole pour cette erreur dans mon fichier test.xml

le fichier est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="UTF-8"?>
<donnees>
<categorie>
<titre>Catégorie 1</titre>
<donnee>
<texte>Donnée A</texte>
<valeur>15</valeur>
</donnee>
</categorie>
<categorie>
<titre>Catégorie 2</titre>
<donnee>
<texte>Donnée B</texte>
<valeur>2</valeur>	
</donnee>
<donnee>
<texte>Donnée C</texte>
<valeur>3</valeur>
</donnee>
<donnee>
<texte>Donnée D</texte>
<valeur>4</valeur>
</donnee>
</categorie>
<categorie>
<titre>Catégorie 3</titre>
<donnee>
<texte>Donnée E</texte>
<valeur>5</valeur>
</donnee>
<donnee>
<texte>Donnée F</texte>
<valeur>6</valeur>
</donnee>
<donnee>
<texte>Donnée G</texte>
<valeur>7</valeur>
</donnee>
<donnee>
<texte>Donnée H</texte>
<valeur>8</valeur>
</donnee>
<donnee>
<texte>Donnée I</texte>
<valeur>9</valeur>
</donnee>
</categorie>
</donnees>

mais il m'affiche la même erreur

alen22 · 09/04/2011, 15h36

ça signifie probablement que attributs n'est pas un élément DOM valide.

je parle de cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var attributs = categorie[i].attributes;

je change avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var attributs = categorie[i]

mais lors de l'exécution elle m'affiche juste pour la partie catégorie la valeur null

alen22 · 09/04/2011, 16h11

franchement cette solution est adopter pour une version specifique de fichier .xml qui a cette forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
<?xml version="1.0" encoding="iso-8859-1" ?>
<donnees>
<categorie titre="Catégorie 1">
<donnee texte="Donnée A" valeur="15"></donnee>
</categorie>
<categorie titre="Catégorie 2">
<donnee texte="Donnée B" valeur="2"></donnee>
<donnee texte="Donnée C" valeur="3"></donnee>
<donnee texte="Donnée D" valeur="4"></donnee>
</categorie>
<categorie titre="Catégorie 3">
<donnee texte="Donnée E" valeur="5"></donnee>
<donnee texte="Donnée F" valeur="6"></donnee>
<donnee texte="Donnée G" valeur="7"></donnee>
<donnee texte="Donnée H" valeur="8"></donnee>
<donnee texte="Donnée I" valeur="9"></donnee>
</categorie>
</donnees>

le code correcte pour cette version est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<script type="text/javascript">
 
function lancer(url){
         setInterval("regen_data(url)",300);
}
var ie5 = (document.getElementById && document.all);
function setXML(xmldocument){
         var k = 0;
         var categorie = xmldocument.getElementsByTagName('categorie');
 
         if(document.getElementById('themaindiv')){
           var x = document.getElementById('themaindiv');
           x.parentNode.removeChild(x);
         }else{
               var themaindiv = document.createElement('div');
               themaindiv.setAttribute("id","themaindiv");
               document.getElementById('affichageData').appendChild(themaindiv);
         }
 
         for (var i=0;i<categorie.length;i++){
             var mydiv = document.createElement('div');
             var attributs = categorie[i].attributes;
             var txt = attributs.getNamedItem("titre").nodeValue;
             mydiv.appendChild(document.createTextNode(">> " + txt));
             if(ie5){
               mydiv.style.cssText = 'width: 100%';
             }
             ie5?mydiv.setAttribute("className", "categorie"):mydiv.setAttribute("class", "categorie");
             /*document.getElementById('affichageData').appendChild(mydiv);*/
             themaindiv.appendChild(mydiv);
             mydiv.setAttribute("id", "categorie" + i);
 
             var mysecdiv = document.createElement('div');
             mysecdiv.setAttribute("id", "sub" + i);
             ie5?mysecdiv.setAttribute("className", "donnee"):mysecdiv.setAttribute("class", "donnee");
             mysecdiv.style.cssText = 'display:block;';
             /*document.getElementById('affichageData').appendChild(mysecdiv);*/
             themaindiv.appendChild(mysecdiv);
 
             var mydata = categorie[i].getElementsByTagName('donnee');
             for (var j=0;j<mydata.length;j++){
                 var attributs= mydata[j].attributes;
                 var txt = attributs.getNamedItem("texte").nodeValue;
                 var valeur = attributs.getNamedItem("valeur").nodeValue;
                 var spn1 = document.createElement('span');
                 spn1.appendChild(document.createTextNode(txt + " : "));
                 var spn2 = document.createElement('span');
                 spn2.appendChild(document.createTextNode(valeur));
                 spn2.setAttribute("id","donnee"+k);
                 k++;
                 mysecdiv.appendChild(spn1);
                 mysecdiv.appendChild(spn2);
                 var b = document.createElement('br');
                 mysecdiv.appendChild(b);
             }
 
         }
}
function resetXML(xmldocument){
         var lesdonnees = xmldocument.getElementsByTagName('donnee');
         for(var l=0;l<lesdonnees.length;l++){
                 document.getElementById('donnee'+l).innerHTML = lesdonnees[l].attributes.getNamedItem("valeur").nodeValue;
         }
}
 
var xhr = null;
function gen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          setXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}
function regen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          resetXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}
 
  </script>

donc je dois faire des modification pour quel marche pour ma version initial de fichier test.xml

j'arrive à connaitre quelque point à modifier

remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var attributs = categorie[i].attributes;
var txt = attributs.getElementsByTagName("titre")[0].nodeValue;

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var txt=categorie.item(i).getElementsByTagName("titre").item(0).innerHTML;

et vous avez me donner de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lesdonnees[l].getElementsByTagName("valeur")[0].firstChild.nodeValue

mais apres l'excution de ma page jsp

il m'affiche ce resultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
>> undefined
undefined : undefined
>> undefined
undefined : undefined
undefined : undefined
undefined : undefined
>> undefined
undefined : undefined
undefined : undefined
undefined : undefined
undefined : undefined
undefined : undefined

merci d'avance

andry.aime · 10/04/2011, 06h39

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.getElementById('donnee'+l).innerHTML = lesdonnees[l].getAttribute("valeur");

08/04/2011, 06h15	#2
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 126 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 126 Points : 7 270 Points : 7 270	Bonjour, Code : Sélectionner tout - Visualiser dans une fenêtre à part lesdonnees[l].getElementsByTagName("valeur")[0].firstChild.nodeValue
	00

09/04/2011, 13h31	#4
alen22 Candidat au titre de Membre du Club franco Inscription : mars 2011 Messages : 199 Détails du profil Informations personnelles : Nom : franco Informations forums : Inscription : mars 2011 Messages : 199 Points : 11 Points : 11	après exécution de la page avec le console d'erreur de firefox il m'affiche cette erreur Code : Sélectionner tout - Visualiser dans une fenêtre à part attribut.getElementsByTagName is not a function cette erreur est lié à cette ligne dans le code Code : Sélectionner tout - Visualiser dans une fenêtre à part var txt = attributs.getElementsByTagName("titre")[0].nodeValue;
	00

09/04/2011, 15h36	#7
alen22 Candidat au titre de Membre du Club franco Inscription : mars 2011 Messages : 199 Détails du profil Informations personnelles : Nom : franco Informations forums : Inscription : mars 2011 Messages : 199 Points : 11 Points : 11	ça signifie probablement que attributs n'est pas un élément DOM valide. je parle de cette ligne : Code : Sélectionner tout - Visualiser dans une fenêtre à part var attributs = categorie[i].attributes; je change avec Code : Sélectionner tout - Visualiser dans une fenêtre à part var attributs = categorie[i] mais lors de l'exécution elle m'affiche juste pour la partie catégorie la valeur null
	00

10/04/2011, 06h39	#9
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 126 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 126 Points : 7 270 Points : 7 270	Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('donnee'+l).innerHTML = lesdonnees[l].getAttribute("valeur");
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email