[jQuery + XML] conversion en html

**benji07** · 29/04/2008, 17h08

Bonjour,

Pour le travail, je dois convertir une chaîne xml en html à l'aide de jquery, sous firefox, aucun problème mais pour Internet Explorer c'est autre chose.

Ma chaine xml:

Code :

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

1
2
3
4
<slide theme_url="" theme_color="red">
   <text top="10px" left="10px" height="100px" width="200px" align="left">Contenu <b>de</b> la <i>zone</i> de <u>texte.</u></text>
   <img src="http://www.google.com/intl/en_ALL/images/logo.gif" top="10px" left="220px" />
</slide>

Le bout de code qui pose problème :

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
function xmlToHtml(textarea){
	var slide = $(textarea.val());
	var theme_url = slide.attr('theme_url');
	var theme_color = slide.attr('theme_color');;
	content = $('<div></div>');
	slide.children().each(function(){
		var nodeName = $(this).get(0).nodeName.toLowerCase();
			switch(nodeName){
				case 'text':
					var text = $('<div></div>');
					text.css({
						position: 'absolute',
						left: $(this).attr('left'),
						top:$(this).attr('top'),
						height:$(this).attr('height'),
						width:$(this).attr('width'),
						align:$(this).attr('align')
					});
					text.append($(this).html());
					content.append(text);
					break;
				case 'img':
					var img = $('<img>');
					img.css({
						position: 'absolute',
						left: $(this).attr('left'),
						top:$(this).attr('top'),
						height:$(this).attr('height'),
						width:$(this).attr('width')
					});
					img.attr('src',$(this).attr('src'));
					content.append(img);
					break;
				default:
					alert('erreur');
					break;
			}
		});
		return content.html();
}

Dans cette fonction, je récupère le textarea qui contient la chaîne xml que je souhaite parser.
Sous Internet Explorer je reçois une chaine vide
et Sous Firefox je reçois :

Code :

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

<div style="position: absolute; left: 10px; top: 10px; height: 100px; width: 200px;">Contenu <b>de</b> la <i>zone</i> de <u>texte.</u></div><img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="position: absolute; left: 220px; top: 10px;">

Je viens de passer 2h sur ce problème et je ne sais toujours pas d'où peut venir cet erreur (je n'ai pas de message d'erreur qui s'affiche et j'ai testé sous IE6 et 7)

**SpaceFrog** · 29/04/2008, 19h25

fais une recherche sur le forum avec" nodeCleaner" ?

**benji07** · 30/04/2008, 11h31

Mon problème ne vient pas de là.

Lorsque je demande le nombre de node qui appartiennent à xml
(le textarea contient le code xml que j'ai écris dans mon premier post)

Code :

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

1
2
xml = $($('textarea').val());
alert(xml.length)

Internet Explorer me renvoie 11 node et Firefox 1 node
En affichant le détail, firefox me renvoie juste la node SLIDE, alors que IE 6 et 7 me renvoie :
SLIDE
TEXT
#text
B
#text
I
#text
U
/TEXT
IMG
/SLIDE

Donc déjà il y a un problème dans ma variable xml, mais je ne vois vraiment pas d'où ça peut venir

--------------
Bon ce n'est plus la peine de chercher, j'ai changer de méthode et ça marche maintenant (je n'essaye plus de parser le document xml avec jquery, mais avec ce petit bout de code)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function parseXML(contenu){
	var xmlDoc;
	if($.browser.msie){
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.loadXML(contenu);
	}
	else{
		parser=new DOMParser();
		xmlDoc=parser.parseFromString(contenu,"text/xml");
	}
	return xmlDoc;
}

**ttone** · 02/05/2008, 00h48

J'utilise ca, ca marche très bien, avec l'option async=false.

En revanche après avoir stocké/parsé mon xml dans un tableau,

Code :

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

 var x = xmlDoc.getElementsByTagName('tagRepere');

je n'arrive pas à le lire :

Code :

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

1
2
3
4
return html + 
	'<li style="width:300px" ><table cellpadding=10px cellspacing=10px><tr><td><img alt="alt_a_mettre_ici" src="pic' +
    index + '.png"/></td><td><h1>'+  x[index].firstChild.nodeValue +'</h1><p>'+  x[index].lastChild.nodeValue +'</p></td></tr></tbody></table></li>';
    });

si j'enleve nodeValue, il m'affiche "object Text", si je le met, il ne m'écrit rien (blank)

**SpaceFrog** · 02/05/2008, 08h30

interprétation des nodes ...

**ttone** · 02/05/2008, 10h58

en effet

Code :

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

1
2
3
4
return html + 
	'<li style="width:300px" ><table cellpadding=10px cellspacing=10px><tr><td><img alt="alt_a_mettre_ici" src="pic' +
    index + '.png"/></td><td><h1>'+  x[index].firstChild.firstChild.nodeValue +'</h1><p>'+  x[index].lastChild.firstChild.nodeValue +'</p></td></tr></tbody></table></li>';
    });

**SpaceFrog** · 02/05/2008, 11h20

he oui si tu avais fait la recherche avec nodeCleaner .. tu aurais vu comment les nodes étaient interpétés et comment y remédier ...

**ttone** · 02/05/2008, 17h20

je connais le mot node depuis moins de 24h,

nodeCleaner

quezako ?

y a t il moyen de modifier le mode d'interprétation des nodes ?

**SpaceFrog** · 02/05/2008, 17h22

Une simple recherche sur le forum t'aurait mené à ceci :

http://javascript.developpez.com/faq...M#DOMIEFirefox

puis à ceci :

http://www.developpez.net/forums/sho...d.php?t=475242

**ttone** · 02/05/2008, 17h36

...

**ttone** · 02/05/2008, 17h39

ceci dit merci, j attaque le "portage" hors FF, ca va m etre très utile

**ttone** · 02/05/2008, 18h05

Ok, merci SpaceFrog, dsl pour ces posts, ... interprétation des nodes, ok, c'est un truc bien fondamental quoi. Bon et bien je suis content ca tourne sur FF, IE, Opera, par contre ca parse pas sur Safari ?
Tu sais pourquoi ?

Cordialement

**SpaceFrog** · 03/05/2008, 09h57

Mets un alert dans ta fonction parseXML pour voir si il reconnait xmlDoc

**ttone** · 04/05/2008, 19h03

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
  //load the xml
 
	if (document.implementation && document.implementation.createDocument)
 
	{xmlDoc = document.implementation.createDocument("", "", null);		}
 
	else if (window.ActiveXObject)
 
	{xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 	 	}
 
	else{alert('Your browser can\'t handle this script');return;	}
 
	xmlDoc.async = false;
 
	alert('stepAlert');
 
	xmlDoc.load("myDoc.xml");
 
	//parse the xml
 
    var x = xmlDoc.getElementsByTagName('stepTag');

je recois bien l'alerte "stepAlert"

**SpaceFrog** · 04/05/2008, 21h22

Code :

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

alert(xmlDoc);

**ttone** · 04/05/2008, 22h00

firefox : object XMLDocument
safair : object Document

**SpaceFrog** · 05/05/2008, 08h47

Alors essaye de mettre des alerts pour voir comme Safari interprète les nodes ...

**ttone** · 05/05/2008, 13h09

avant ca ca signifie qqchose que FF alerte
Code : Sélectionner tout - Visualiser dans une fenêtre à part

XMLdocument

, et Safari
Code : Sélectionner tout - Visualiser dans une fenêtre à part

Document

?

**benji07** · 05/05/2008, 16h17

Oui car un XMLDocument est un Document, mais l'inverse n'est pas vrai, principe d'heritage

**ttone** · 05/05/2008, 16h26

est il possible que Safari ne reconnaisse pas la spec XML du document en question ?

Code :

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

1
2
3
4
5
6
7
8
9
if (document.implementation && document.implementation.createDocument)
 
	{xmlDoc = document.implementation.createDocument("", "", null);		}
 
	else if (window.ActiveXObject)
 
	{xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 	 	}
 
	else{alert('Your browser can\'t handle this script');return;	}

J'ai oui dire aussi que Safari était un peu lourd avec les JS ?

[jQuery + XML] conversion en html

jQuery

Discussions similaires

Partager

Partager