Réponse ajax type responseXML et traitement DOM

[n1n0x]

Bonjour,

j'organise la récupération de données sous forme de DOM comme suit:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
// ... 
// REQUETES SQL pour récuperer les données dans le fetch-assoc $rec...
 
 
echo "<entries>";
		echo		$rec['count(*)'];
echo "</entries>";
 
echo "<project_".$i.">";
 
		// Information about Project
		echo		"<projectId>";
		echo			$rec['projectId'];
		echo		"</projectId>";
 
		echo 		"<title>";
		echo			$rec['title'];
		echo		"</title>";
 
...

Dans mon script js Ajax je souhaite donc récupérer ces infos pour les "parser" et les écrire dans mon document :

Code :

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
// la réponse du traitement asynchrone effectué en PHP
var docXML = xhr.responseXML; 

// Mon DOC parent
var write_in = document.getElementById('ajax-ListProjects');
	  
		  // lines to add on the table
		  var lines = docXML.getElementsByTagName("entries").values;
		  
		  for(i=0; i<lines; i++)
		  {
			  
			  var tableTr = document.createElement("tr");	  
			  if(i%2 != 0)
			  	tableTr.setAttribute("class", "alt");
			  
			  write_in.appendChild(tableTr);
			  
			  
			  var tdTitle = document.createElement("td");
			  var title = createTextNode( docXML.getElementsByTagName("title")[i].value );
			  tdTitle.appendChild(title);
			  write_in.appendChild(tdTitle);

// ... 
}

Et voici l'erreur que j'obtiens sous Firebug :

docXML has no properties
[Break on this error] var lines = docXML.getElementsByTagName("entries").value;

Il semble donc que je ne puisse pas récuperer les infos ?!
Pourtant en lançant ma page .php manuellement (hors appel ajax), j'obtiens bien l'affichage du texte entre mes balises "entries" :
<entries _moz-userdefined="">1</entries>




EDIT >>>
Pour info, je suis parti de l'exemple illustré sur ce tutoriel pour le principe.


Merci de votre aide.

[4R416N33]

As tu bien pensé à ajouter la balise

Code :

1
2
 
header('Content-Type: text/xml');

au début de ton fichier php ???

[n1n0x]

Merci d'avoir relevé ceci !

Celà dit j'ai un problème à mi-chemin : désormais ma page php construit bien mon DOM tree avec les infos récupérées depuis la base de données, mais ces infos ne sont pas écrites dans mon document parent une fois la "responseXML" récupérée en Ajax.

Pourquoi ?
Il s'agit de mettre en forme ces données sous forme de tableau, donc je créés des nodes "tr" et "td", ai-je bien le droit? Problème de syntaxe? (Je n'ai pas trouvé d'exemple dans mon bouquin Ajax, ils ne créent que des div ! )

Je vous remets ici une petite portion :

Code :

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
if(xhr.readyState==4)
      {
		  
		  var docXML = xhr.responseXML;
		  var write_in = document.getElementById('ajax-ListProjects');
		  
		  // lines to add on the table
		  var lines = docXML.getElementsByTagName("entries").value;
		  
		  for(i=0; i<lines; i++)
		  {
			  
			  var tableTr = document.createElement("tr");	  
			  if(i%2 != 0)
			  	tableTr.setAttribute("class", "alt");
			  
			  write_in.appendChild(tableTr);
			  
			  
			  var tdTitle = document.createElement("td");
			  var title = createTextNode( docXML.getElementsByTagName("title")[i].value );
			  tdTitle.appendChild(title);
			  write_in.appendChild(tdTitle);
			  
			  var tdLastupd = document.createElement("td");
			  var lastupd = createTextNode("n/a");
			  tdLastupd.appendChild(lastupd);
			  write_in.appendChild(tdLastupd);

... 
             }

Les infos que je veux écrire devront donc être insérées dans le <div id="ajax-ListProjects"> </div> , qui est lui même imbriqué dans un <table></table> .

Comme résultat, j'obtiens un grand vide à l'intérieur du div "ajax-ListProjects".

Je n'ai certainement pas bien compris le traitement DOM sous javascript...

Dans la portion que je vous soumet, j'espérais comme résultat html cette structure:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<table>
<div id="ajax-ListProjects">
     <tr>
              <td>
                   // contenu de var title
              </td>
 
              <td>
                  // contenu de var lastupd
              </td>
 
              // ...
     </tr>
</div>

[E.Bzz]

Bonjour,
il existe des instructions spécifiques pour ajouter des lignes dans un tableau ...

As-tu essayé ?

A+

[n1n0x]

Envoyé par E.Bzz

Bonjour,
il existe des instructions spécifiques pour ajouter des lignes dans un tableau ...

As-tu essayé ?

A+

On a posté en même tps. Merci, ca m'a l'air tout bon ce que tu proposes! Je vais tester ca.

Merci !

[n1n0x]

J'voudrais pas abuser de votre patience mais j'aimerais savoir si niveau syntaxe ca vous paraissait bon (DOM):

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
var newRow = document.getElementById('myTable').insertRow(-1);
			  if(i%2 != 0)
			  	newRow.setAttribute("class", "alt");
				
var newCell = newRow.insertCell(0);
newCell.innerHTML = docXML.getElementsByTagName("title")[i].value;

newCell = newRow.insertCell(1);
newCell.innerHTML = 'n/a';

newCell = newRow.insertCell(2);
newCell.innerHTML = docXML.getElementsByTagName("managerLname")[i].value+", "+docXML.getElementsByTagName("managerFname")[i].value;

En gros je parse mon arbre DOM que j'ai construit au préalable, et qui est amené à avoir cette tête là :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<entries>2</entries>
 
<project_1>
      <title>Titre bla bla</title>
      <desc>Description bla bla</desc>
      ...
</project_1>
 
<project_2>
      <title>Titre bla bla</title>
      <desc>Description bla bla</desc>
</project_2>

Voilà pourquoi je suis amené à distinguer les noeuds title, desc, en fonction de leur indice.

Est-ce que donc ceci:
docXML.getElementsByTagName("title")[i].value;

fait bien référence à mon titre du premier projet quand i=0 ?


Merci.

[E.Bzz]

Envoyé par n1n0x

Est-ce que donc ceci:
docXML.getElementsByTagName("title")[i].value;

fait bien référence à mon titre du premier projet quand i=0 ?

A priori, oui ...

A+

[n1n0x]

Dans ce cas je ne comprends pas pourquoi quand je fais :

alert("test: "+docXML.getElementsByTagName("title")[0]);
ca m'affiche bien "test: [ object Element ]"

alors que :


alert("test: "+docXML.getElementsByTagName("title")[0].value);
affiche "test: undefined"


Comment faire pour accéder aux infos entre mes <tag></tag> du DOM ?
.......

[DoubleU]

.nodeValue, pas .value