[DOM] lire du xml avec du javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

08/09/2008, 15h27
redah75

au fait, quelle est la difference entre res = xhr.responseXML.documentElement et res = xhr.responseXML ??
08/09/2008, 15h35
DoubleU

Citation:

au fait, quelle est la difference entre res = xhr.responseXML.documentElement et res = xhr.responseXML ??

xhr.responseXML te renvoies l'objet qui représente l'arbre xml et xhr.responseXML.documentElement te renvoies le noeud racine de cet arbre.

Citation:

svp, quel est le moyen le plus simple pour pouvoir afficher les info depuis le fichier xml, sachant que je ne suis pas un pro et que ca doit etre dynamique, car je n'est pas toujours que le titre en et fr, et qu'il peut y avoir 1 ou n auteurs...

Le plus simple est la première solution que je t'ai proposé.
Pour récupérer tous tes auteurs tu fais un getElementsByTagName("nom") et tu boucles sur la liste que tu récupères pour les afficher.
Pour récupérer tous tes titres, tu boucles sur les childNodes du noeud titre en vérifiant que ces noeuds ne sont pas des noeuds textes (car comme spaffy te l'as dit plus haut, FF trouvera des noeuds textes vides alors qu'IE non)
08/09/2008, 15h57
redah75
Citation:

xhr.responseXML te renvoies l'objet qui représente l'arbre xml et xhr.responseXML.documentElement te renvoies le noeud racine de cet arbre

Dans mon quoi, que dois je utiliser?

voici un exemple tres courant de ce que je peux obtenir ds le fichier xml :
Code:

1 2 3 4 5 6 7 8 9 10 11 <article> <titres> <en>titre en</en> <fr>titre fr</fr> <es>titre es</es> </titres> <auteurs> <nom>auteur 1</nom> <nom>auteur 2</nom> </auteurs> </article>
Citation:

Pour récupérer tous tes auteurs tu fais un getElementsByTagName("nom") et tu boucles sur la liste que tu récupères pour les afficher.
Pour récupérer tous tes titres, tu boucles sur les childNodes du noeud titre en vérifiant que ces noeuds ne sont pas des noeuds textes (car comme spaffy te l'as dit plus haut, FF trouvera des noeuds textes vides alors qu'IE non)

J'ai un peu de mal a copmprendre, pourras tu stp me donner un exemple concret des boucles??

Merci encore une fois
08/09/2008, 16h03
DoubleU

Ca te sera surement plus profitable si tu reprenais au calme la manipulation du DOM depuis les bases ;)

Par exemple, tu peux commencer ici.

c cool, j'ai reussi pour les auteurs :) :
Code:

1 2 3 4 5 6 7 nbr = response.getElementsByTagName("auteurs")[0].childNodes.length; html += "Auteur(s) : "; for(i = 0; i < nbr; i++) { html += response.getElementsByTagName("nom")[i].firstChild.nodeValue; if(i < nbr - 1) html += ", "; }
cela te parait correcte??

mais par contre je seche pour les titres :(
pour demarrer, je fais un

Code:

alert(response.getElementsByTagName("titles")[0].childNodes[0].nodeValue);

et il m'affiche NULL
par contre si je fais

Code:

alert(response.getElementsByTagName("titles")[0].childNodes[0].nodeName);

il m'affiche bien 'en'

un petit coup de main ??? :oops:

08/09/2008, 16h29
DoubleU

Code:

nbr = response.getElementsByTagName("auteurs")[0].childNodes.length

Attention à ca, suivant le navigateur tu n'auras pas le meme nombre. Le mieux est de faire directement nbr = response.getElementsByTagName("nom").length

Citation:

Code :

alert(response.getElementsByTagName("titles")[0].childNodes[0].nodeName);

il m'affiche bien 'en'

un petit coup de main ???

Essaie en utilisant .data au lieu de .nodeValue
08/09/2008, 17h29
redah75

Citation:

Attention à ca, suivant le navigateur tu n'auras pas le meme nombre. Le mieux est de faire directement nbr = response.getElementsByTagName("nom").length

OK, merci

Citation:

Essaie en utilisant .data au lieu de .nodeValue

je devais mettre

Code:

response.getElementsByTagName("titres")[0].childNodes[0].firstChild.nodeValue

au lieu de

Code:

response.getElementsByTagName("titres")[0].childNodes[0].nodeValue

et la, le tout marche bien :)
08/09/2008, 17h31
redah75

une petite precision:

Citation:

xhr.responseXML te renvoies l'objet qui représente l'arbre xml et xhr.responseXML.documentElement te renvoies le noeud racine de cet arbre.

concretement, qu'elle est la difference? ds mon script je l'ai pas mis, qu'est ce que ca aurait change si je l'avais mis?

Bonjour, je reviens encore vers vous car j'ai encore un tout petit souci :(

ma requete ajax ne focntionne pas bien lorsque j'ai des resultats avec des ' ou ", savez vous comment palier a ce probleme?

voici un bout de mon code :

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
33
34
35
36
37
38
39
40
41
42
43
function xhr_search_article(val1, val2, val3)
{
	if(val1 && val1.length > 3)
	{
		var xhr = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); // IE else Ff, Mozilla...
 
		xhr.onreadystatechange = function()
		{
			if(xhr.readyState == 4)
			{
				if(xhr.status == 200)
				{
					var val_final = "<table width='100%' border='0' cellpadding='0' cellspacing='0'>";
					val_final += "<tr><td height='20' valign='top' align='right' colspan='2'><b><a href='javascript:;' onClick=\"open_close('" + val3 + "');\" title='Fermer'><span class='red'>x</span></a></b></td></tr>";
					if(xhr.responseText != "")
					{
						var lines = xhr.responseText.split('\n');
						for (var i = 0; i < lines.length; i++)
						{
							var line = lines[i].split('~');
							for (var j = 0; j < 2; j++)
							{
								val_final += "<tr><td hight='16' width='258'><a href='javascript:;' class='linkMenu1' onClick=\"document.getElementById('" + val2 + "').value = '" + line[1] + "'; open_close('" + val3 + "');\">" + line[1] + "</a></td><td align='right' width='12'><a href='javascript:;' onClick=\"xhr_preview_article(" + line[0] + ", '" + line[1] + "'); open_close('" + val3 + "');\"><img src='../../img/loupe.gif' width='12' border='0'></a></td></tr>";
								break;
							}
						}
					}
					val_final += "</table>";
 
					document.getElementById(val3).style.display = '';
					document.getElementById(val3).innerHTML = val_final;
				}
				else document.getElementById(val3).innerHTML = "Error code: " + xhr.status;
			}
		};
 
		//Open the file, POST method
		xhr.open("POST", "/admin/fridoc/articles/xhr_search_article.php?title=" + val1, true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send();
	}
	else document.getElementById(val3).style.display = 'none';
}

et mon fichier php est le suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
$sel = mysql_query("SELECT id_article, titre FROM ...");
mysql_close($con);
$num = mysql_num_rows($sel);
$i = 1;
while($res = mysql_fetch_array($sel))
{
	$results .= "$res[id_article]~$res[title]";
	if($i++ < $num) $results .= "\n";
}
 
echo $results;

Merci encore une fois

12/09/2008, 11h35
SpaceFrog

Tu peux nous montre un exemple de ce que tu reçois et de ce que tu aimerais recevoir ?
Il faudrat :
les enlever avec une regExp ?
paramétrer ta table pour le ne pas avoir les quotyes ?
12/09/2008, 12h16
redah75

j'ai mis un echo addslashes($results); ds le fichier PHP mais ca regle pas le probleme.

lorsque je commence a saisir pour afficher les resultats generes par ajax, j'ai un message d'erreur internet explorer : Constante chaine non terminee
l'erreur vien de cette ligne:

Code:

val_final += "<tr><td hight='16' width='258'><a href='javascript:;' onClick=\"document.getElementById('mon_calque').value = '" + line[1] + "';\">" + line[1] + "</a></td></tr>";

et c'est le premier line[1] qui bloque. la valeur de line[1] ds mon exemple est: test titre' " ) ( &
j'ai mis different caracteres speciaux pour bien tester.
ce qui bloque est le caractere " !!!
12/09/2008, 12h49
SpaceFrog

pour commencer

Code:

hight='16'

manque un e
12/09/2008, 12h54
SpaceFrog

Code:

val_final += '<tr><td height="16" width="258"><a href="javascript:;" onclick="document.getElementById('mon_calque').value =\'' + line[1] + '\';">' + line[1] + '</a></td></tr>'

mais il y a une balise a ouvrante qui manque ...???
12/09/2008, 13h07
redah75

Citation:

manque un e

Petite faut d'inattention :)

Citation:

mais il y a une balise a ouvrante qui manque ...???

Le changement entre les guillemets et cotes peux regler le probleme?
par contre je ne vois pas trop la balise qui manque!!
12/09/2008, 13h12
SpaceFrog

dans le code fourni il y a une balise

Code:

</a>

il devrait y avoir aussi la balise ouvrante ...

Code:

<a>

dans le même conteneur... elle ne doit pas être en dehors de la balise td !!!
12/09/2008, 13h19
redah75

elle y est la balise <a>:

Code:

val_final += "<tr><td hight='16' width='258'><a href='javascript:;' ...

:)

enfin pour resumer, comment faire pour que cette syntaxe javascript soit bonne:

Code:

var valeur = "<a href=\"document.getElementById('id_champ').value = '" + val + "';\">mon lien</a>"

où val = mon' titre " foireux !! :)
12/09/2008, 13h33
SpaceFrog

arf vaut mieux y voir comme ça que pas du tout :red:

oki pour le a ...

ton val contient des quotes ?
12/09/2008, 13h52
redah75

Citation:

ton val contient des quotes ?

oui, val peut etre : l'avenir du... "21e siecle" par exemple :)
12/09/2008, 14h01
SpaceFrog

fais en un html_entites en php ...
ou un escape en javascript ...

Citation:

fais en un html_entites en php

crois mois, j'y ai pense mais là, vrmt je pete un plan, ca ne marche pas:
Code:

1 2 3 4 5 6 <? $str = 'Un \'apostrophe\' en <strong>gras</strong>'; ou $str = "Un 'apostrophe' en <strong>gras</strong>"; // Affiche : Un 'apostrophe' en <strong>gras</strong> echo htmlentities($str, ENT_QUOTES); ?>
je ne sais pa pk mais cette fonction php ne fonctionne pas chez moi!!

Citation:

ou un escape en javascript

Comment faire ca?

Voir 40 message(s) de cette discussion en une page