Partage

Erreur recupération fichier xml

AJAX

Sujet résolu

12 janvier 2011 à 15:50:28

Bonjour,
Je voudrais récupérer les infos d'un fichier xml mais j'ai une erreur que je n'arrive pas à résoudre !
voici le code javascript :

function loadWall(data)
{
	
	var nodes = data.getElementsByTagName("wallpost");
	var spanName = document.createElement("span");
	var spanText = document.createElement("span");
	var p = document.createElement("p");
	var br = document.createElement("br");
	var wall = document.getElementById("wall");

	//Edit :
	var node1,node2;
	
	//alert(nodes[0].getAttribute("name"));
	
	for (var i=0,c=nodes.length;i<c;i++)
	{
		node1 = document.createTextNode(nodes[i].getAttribute("name")); //****Ceci est la ligne 43 !
		node2= document.createTextNode(" ("+nodes[i].getAttribute("nick")+")");
		
		spanName = document.createElement("span");
		spanText = document.createElement("span");
			
		spanName.className="name";
		spanText.className="text"+nodes[i].getAttribute("id");
		
		spanName.appendChild(node1);
		spanName.appendChild(node2);
		p.appendChild(spanName);
		p.appendChild(br);
		
		spanText.appendChild(nodes[i]);
		p.appendChild(spanText);
		p.appendChild(br);	
				
	}
	wall.appendChild(p);
	
	
}

J'appelle la fonction comme ceci : loadWall(xhr.responseXML);
J'ai un message d'erreur dans la console : "nodes[i] is undefined l.43"

Je ne vois pas le problème
quand je fais alert(nodes[0].getAttribute("name")); avant la boucle j'ai bien un alert avec le nom dedans ..

Merci d'avance !

Edit : ajout de l'initialisation des variables node1 et node2. Mais ça ne fonctionne toujours pas :/

Golmote

12 janvier 2011 à 20:40:19

Je subodore que ton appendChild de la ligne 32 retire l'élément de la liste nodes.

Il faudrait donc peut-être faire quelque chose comme ça :

while(nodes.length>0) { // Tant qu'il reste des noeuds
    node1 = document.createTextNode(nodes[0].getAttribute("name"));
    /* ... */

Snigle

13 janvier 2011 à 19:20:46

Merci effectivement le problème venait de la!
J'ai donc crée une troisième variable node3 pour récupérer.

Mais par contre je n'arrive pas a récupérer le text entre deux balises XML ex : <wallpost>TexT</wallpost>
j'ai essayé nodes[i].value mais ça ne marche pas.

De plus j'aimerai modifier le text récupérer pour lui appliquer une fonction php bbcode() mais je ne vois pas comment faire :s

Une dernière chose, mes nodes BR ne fonctionnent pas, le texte est tout aligné .. Pourquoi ?

Merci pour votre aide

Golmote

13 janvier 2011 à 19:35:10

Pour récupérer le texte entre deux balises, essaye .nodeValue ou .firstChild.data (les deux devraient normalement fonctionner)

Pour la fonction PHP bbcode(), soit tu utilises l'Ajax (cf tuto) soit tu recrées ta fonction bbcode() en JavaScript (en supposant que ce soit faisable).

Pour les , comme je l'ai sous-entendu dans le post précédent, quand tu fais un appendChild d'un élément, tu le déplaces.
Donc ligne 34, ton appendChild ne fait que déplacer le précédemment inséré ligne 30.

Il serait peut-être bon de modifier ces lignes comme ceci :

p.appendChild(br.cloneNode(false));
		
		spanText.appendChild(nodes[i]);
		p.appendChild(spanText);
		p.appendChild(br.cloneNode(false));

Snigle

13 janvier 2011 à 19:48:35

AH MERCI =)
Tu me sauves la vie

c'est des trucs simple mais il faut le savoir !
Par contre .nodeValue ça retourne rien du tout mais l'autre marche

Pour mon bbcode, je voulais l'utiliser directement dans la page qui génère le XML mais je n'arrive pas à récupérer le html ! x)

Une piste ?

edite : pourquoi le false pour le Clone ?

Golmote

13 janvier 2011 à 19:54:02

Sans code, je ne peux pas te donner de piste.

Concernant ton edit, je te redirige vers là où tu aurais dû aller avant de demander :-°

https://developer.mozilla.org/fr/DOM/element.cloneNode

Snigle

13 janvier 2011 à 21:58:52

Merci pour le lien, le code est exactement celui que j'ai mis, et je ne sais pas comment transmettre le bbcode.
Par exemple la je met la fonction bbcode quand je génère le XML mais du coup le HTML est ignoré ..

echo '<wallpost id="'.$post['id'].'" name="'.$post['name'].'" nick="'.$post['nick'].'" attachment="'.$post['attachment'].'" error="'.$post['error'].'">'.bbcode($post['text']).'</wallpost>';

Je n'ai pas d'idée de comment faire. A par refaire la fonction en javascript ... Mais si je peux éviter

Golmote

14 janvier 2011 à 7:52:55

Comment ça le HTML est ignoré ?

Snigle

14 janvier 2011 à 10:07:28

Par exemple le bbcode donne:
quelquechose truc
Sur ma page qui affiche le cotenu du XML il met seulement quelquechose et supprime le reste en gros ..
Je montrerai un exemple concret ce soir

Merci en tout cas

Edite :

Alors voici le XML qui est chargé par le code dans mon premier post :

<list>
−
<wallpost id="35" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">
Moi c\'est 
<span style="color:red">Snigle</span>
</wallpost>
−
<wallpost id="34" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">
<span style="color:red">Snigle</span>
</wallpost>
−
<wallpost id="33" name="" nick="MaxShift" attachment="/img/news/news.png" error="">
Hep, c\'est moi!  
<img src="img/smiley/smile.png" alt="smiley"/>
</wallpost>
<wallpost id="32" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">Wesh !!</wallpost>
<wallpost id="31" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">hoho</wallpost>
<wallpost id="30" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">huhu</wallpost>
<wallpost id="29" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">atch</wallpost>
<wallpost id="28" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">hihi</wallpost>
<wallpost id="27" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">test</wallpost>
<wallpost id="26" name="Ludovic" nick="Snigle" attachment="/img/news/news.png" error="">toto</wallpost>
</list>

Quand je charge l'id 35 par exemple, ma page affiche seulement :
Moi c\'est

Donc voila je trouve pas comment utiliser mon bbcode :s

Edite :
De plus j'ai un problème avec les accents et les sauts de lignes qui ne sont même pas inséré dans la base..

Voici ma page de test :
http://livedevil.verygames.net/index2.php
Vous ne pouvez pas poster mais déjà voir le probleme,
Si tu cliques sur le bouton 0 en bas des messages tu verras afficher le XML qui est généré !
Alala il me manque pas mal de truc :s

Snigle

15 janvier 2011 à 11:30:42

De plus j'ai un problème avec les accents et les sauts de lignes qui ne sont même pas inséré dans la base..

Voici ma page de test :
http://livedevil.verygames.net/index2.php

Vous ne pouvez pas poster mais déjà voir le probleme,
Si tu cliques sur le bouton 0 en bas des messages tu verras s'afficher le XML qui est généré !

J'utilise donc ceci pour faire la requête vers ma page php et ensuite afficher le ce qu'on récupère :

function initWall()
{
	
	if(xhr && xhr.readyState!=0)
	{
		return ;
	}
	xhr = newXhr();
	xhr.onreadystatechange = function() {
	if(xhr.readyState==4 && ( xhr.status == 0 || xhr.status == 200))
	{
		document.getElementById("wall_loader").style.display = "none";
		loadWall(xhr.responseXML);
		xhr.abort();
		
	}
	else if(xhr.readyState < 4)
	{
		document.getElementById("wall_loader").style.display = "inline";
	}
	};
 xhr.open('POST','f_wall.php');
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xhr.send("debut="+nombre_post+"&f=show");
}

function loadWall(data)
{
	
	var nodes = data.getElementsByTagName("wallpost");
	var spanName = document.createElement("span");
	var spanText = document.createElement("span");
	var p = document.createElement("p");
	var br = document.createElement("br");
	var post = document.getElementById("post");
	
	var i = 0,c = nodes.length;
	var node1,node2,node3,picture,attachment;
	//alert(nodes[0]);
	
	for ( i=0,c=nodes.length;i<c;i++)
	{
		p = document.createElement("p");
		pp = document.createElement("p");
		node1=null;
		node2=null;
		node1 = document.createTextNode(nodes[i].getAttribute("name"));
		node2= document.createTextNode(" ("+nodes[i].getAttribute("nick")+")");
		node3 = document.createTextNode(nl2br(nodes[i].firstChild.data));
		
		spanName = document.createElement("span");
		spanText = document.createElement("span");
		spanAttachment = document.createElement("span");
			
		spanName.className="name";
		spanName.className="attachment";
		spanText.className="text"+nodes[i].getAttribute("id");
		
		picture = document.createElement("img");
		picture.src = nodes[i].getAttribute("picture");
		picture.style.width="50px";
		picture.alt="photo";
		pp.setAttribute("style",pp.getAttribute("style")+";float:left");
		//pp.style.verticalAlign="top";
		pp.appendChild(picture);
		pp.style.width="55px";
		
		
		spanName.appendChild(node1);
		spanName.appendChild(node2);
		p.appendChild(spanName);
		p.appendChild(br.cloneNode(false));
		
		spanText.appendChild(node3);
		p.appendChild(spanText);
		p.appendChild(br.cloneNode(false));	
		
		p.style.marginLeft="60px";
		//spanName.style.marginLeft="55px";
		
		if(nodes[i].getAttribute("type")=="picture")
		{
			attachment = document.createElement("img");
			attachment.src=nodes[i].getAttribute("attachment");
			attachment.alt="image";
			attachment.className="picture";
			spanAttachment.appendChild(attachment);
			p.appendChild(spanAttachment);
		}
		else if(nodes[i].getAttribute("type")=="video")
		{
		
		}
		//if(nodes[i].getAttribute("error"))
		//alert(nodes[i].getAttribute("error"));
		nombre_post ++;		
		post.appendChild(pp);
		post.appendChild(p);
		post.appendChild(br.cloneNode(false));
	}
	
		
	//wall.insertBefore(wall.childNodes[0],p);
	//alert("test4");
	
}

Golmote

15 janvier 2011 à 12:32:02

Je ne vois pas de HTML sur le fichier http://livedevil.verygames.net/f_wall.php ...

Si dans un node, tu as du HTML... tu as donc plusieurs nodes... Il faut les parcourir et les parser et tout et tout...

Le .firstChild.data ne récupèrera que le premier noeud de texte.

Snigle

15 janvier 2011 à 13:29:49

Escuse moi j'avais retiré le bbcode en attendant.
C'est compliqué de les parcourir et de les parser ? Je suis au fond du trou la je vois pas comment je vais m'en sortir.. Surtout pou les sauts de lignes quoi x)

Edite:
J'ai remis du HTML dans mon xml la tu peux regarder

Golmote

15 janvier 2011 à 14:39:04

En faisant une boucle while() sur l'attribut childNodes de chaque wallpost, tu devrais pouvoir appendChild chaque noeud enfant.

Vu que le noeud sera déplacé, il faudra faire comme expliqué précédemment.

Snigle

15 janvier 2011 à 18:33:31

Alors j'ai essayé ceci :

j=0;

while(j<nodes[i].childNodes.length)
{
spanText.appendChild(nodes[i].childNodes[j]);
j++;
}

La ca affiche tout le texte et ca ne prends pas en compte les 
Cependant le Snigle n'apparait même pas comme avant.

J'ai aussi essayé ca :

j=0;
		while(nodes[i].childNodes.length>0)
		{
		spanText.appendChild(nodes[i].childNodes[j]);
		j++;
		}

Mais j'ai un message d'erreur :

Erreur : uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLElement.appendChild]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: http://livedevil.verygames.net/j_index.js :: loadWall :: line 83"  data: no]

Golmote

15 janvier 2011 à 18:53:20

Dans la deuxième version du code, débarrasse-toi de la variable "j" et utilise 0 à la ligne 4.

Snigle

15 janvier 2011 à 19:01:47

Ha oui d'accord je comprends

Alors le HTML apparait dans le code source de la page :

</p><p style="margin-left: 60px;"><span class="name">Ludovic (Snigle)</span><br><span class="text85">Je suis <span style="color:red">Snigle</span><br>
Ceci est encore un test<br>
Pour vois si les saut des lignes fonctionnent !</span><br><span class="attachment"><img class="picture" alt="image" src="//user.oc-static.com/files/228001_229000/228921.png"></span><br><span>Il y a 1 minutes</span>

Comme tu vois, tout y est mais ca affiche pas ..
http://livedevil.verygames.net/index2.php ( Petit clin d'oeil j'ai mis ton image pour test l'ajout d'une photo xD )

Golmote

15 janvier 2011 à 20:31:50

J'arrive pas à comprendre ce qui cloche dans ton code... Les éléments sont créés et insérés mais ne réagissent pas comme il faut :euh:

Inverse l'ordre de tes appendChild (tu peux insérer un élément, et ensuite lui ajouter des enfants), ça permettra d'observer les insertions une à une. :euh:

Snigle

16 janvier 2011 à 13:23:15

Je l'ai mis comme ceci :

function loadWall(data)
{
	
	var nodes = data.getElementsByTagName("wallpost");
	var spanName = document.createElement("span");
	var spanText = document.createElement("span");
	var p = document.createElement("p");
	var br = document.createElement("br");
	var post = document.getElementById("post");
	
	var i = 0,c = nodes.length;
	var node1,node2,node3,picture,attachment;
	var postDate;
	//alert(nodes[0]);
	
	for ( i=0,c=nodes.length;i<c;i++)
	{
		p = document.createElement("p");
		pp = document.createElement("p");
		node1=null;
		node2=null;
		node1 = document.createTextNode(nodes[i].getAttribute("name"));
		node2= document.createTextNode(" ("+nodes[i].getAttribute("nick")+")");
		postDate = document.createElement("span");
		postDate.appendChild(genDate(nodes[i].getAttribute("timestamp")));
		picture = document.createElement("img");
		spanName = document.createElement("span");
		spanText = document.createElement("span");
		spanAttachment = document.createElement("span");
		attachment = document.createElement("img");
		
		post.appendChild(pp);
		post.appendChild(p);
		post.appendChild(br.cloneNode(false));
		
		pp.appendChild(picture);
		
		spanName.appendChild(node1);
		spanName.appendChild(node2);
		p.appendChild(spanName);
		p.appendChild(br.cloneNode(false));
		
		p.appendChild(spanText);
		p.appendChild(br.cloneNode(false));	
		
		spanAttachment.appendChild(attachment);
		if(nodes[i].getAttribute("type")=="picture")
		p.appendChild(spanAttachment);
		spanAttachment.appendChild(br.cloneNode(false));
		
		p.appendChild(postDate);
		
		
		
		
			
		spanName.className="name";
		spanAttachment.className="attachment";
		spanText.className="text"+nodes[i].getAttribute("id");
		
		
		picture.src = nodes[i].getAttribute("picture");
		picture.style.width="50px";
		picture.alt="photo";
		pp.setAttribute("style",pp.getAttribute("style")+";float:left");
		//pp.style.verticalAlign="top";
		
		pp.style.width="55px";
		
		
		
		
		
		//alert(nodes[i].childNodes.length);
		
		while(nodes[i].childNodes.length>0)
		{
		spanText.appendChild(nodes[i].childNodes[0]);
		}
		
		
		
		p.style.marginLeft="60px";
		//spanName.style.marginLeft="55px";
		
		if(nodes[i].getAttribute("type")=="picture")
		{
			
			attachment.src=nodes[i].getAttribute("attachment");
			attachment.alt="image";
			attachment.className="picture";
			
			
		}
		else if(nodes[i].getAttribute("type")=="video")
		{
		
		}
		
		//if(nodes[i].getAttribute("error"))
		//alert(nodes[i].getAttribute("error"));
		nombre_post ++;		
		
		
		
		//alert(nodes[i].getAttribute("timestamp"));
	}
		
	//wall.insertBefore(wall.childNodes[0],p);
	
	
}

C'est ça que tu demandais ? En tout cas le résultat est le même :s

Golmote

16 janvier 2011 à 13:50:42

Oui, c'est ça que je demandais... mais je trouve pas.

Franchement j'en sais rien. J'ai remarqué que tu avais toujours des "\n" dans le XML. Ca crée des noeuds de texte qui servent à rien. Essaye de les enlever.

Essaye de vérifier que tes encodages sont bons partout...

Au delà de ça, j'ai plus d'idées. :euh:

Snigle

16 janvier 2011 à 14:02:15

Je ne vois pas les \n dans le XML ? Juste des ?
Cette ligne spanText.appendChild(nodes[i].childNodes[0]);
est dites non prise en charge sur internet Explorer xD
Rien ne vas dans mon code lol

Golmote

16 janvier 2011 à 14:26:06

Les \n, c'est n'importe quel passage à la ligne dans la génération du XML :-°

Snigle

16 janvier 2011 à 14:42:23

OUF j'ai reussi à parer le problème =)

var j=0;
		var b=0;
		var d=nodes[i].childNodes.length;
		while(j<d)
		{
		
			if(nodes[i].childNodes[b].nodeName=="#text")
			no=nodes[i].childNodes[b];
			else if(nodes[i].childNodes[b].nodeName=="span")
			{
			no=document.createElement(nodes[i].childNodes[b].nodeName);
			notext=document.createTextNode(nodes[i].childNodes[b].firstChild.data);
			no.appendChild(notext);
			no.setAttribute("style",nodes[i].childNodes[b].getAttribute("style"));
			
			b++;
			
			}
			else if(nodes[i].childNodes[b].nodeName=="br")
			{
				no=document.createElement(nodes[i].childNodes[b].nodeName);
				b++;
			}
			else if(nodes[i].childNodes[b].nodeName=="img")
			{
			no=document.createElement(nodes[i].childNodes[b].nodeName);
			no.setAttribute("style","max-width:300px;max-height:50px;");
			no.setAttribute("src",nodes[i].childNodes[b].getAttribute("src"));
			no.setAttribute("alt",nodes[i].childNodes[b].getAttribute("alt"));
			
			b++;
			
			}
			else
			no=nodes[i].childNodes[b];
			
			spanText.appendChild(no);
			j++;
		}

Edite :
Le problème c'est que c'est incompatible IE !
Tu sais pas pourquoi ?
C'est cette ligne qu'il n'aime pas :
spanText.appendChild(no);

Golmote

16 janvier 2011 à 15:42:25

C'est bizarre que tu doives recréer les éléments d'après leur tag... M'enfin c'est cool si ça résout le problème. A la réflexion, c'est peut-être un truc dû aux éléments XML qui ne peuvent pas être insérés directement dans du HTML ?

Quel est le message d'erreur sous IE ?

Snigle

16 janvier 2011 à 17:02:47

Le message est :
Line: 148
Erreur : Cette interface n’est pas prise en charge

La ligne est : spanText.appendChild(no);

Edite :

J'ai trouvé !
La source du problème venait d'ici :
no=nodes[i].childNodes[j];
j'ai remplacé en :
no=document.createTextNode(nodes[i].childNodes[j].data);

Maintenant tout fonctionne sauf les accents

Edite :
Et voila tout est résolue ! Pour les accents j'utilise
utf8_decode
pour insérer dans la BDD et ça fonctionne
Merci pour tout !