Discussion :

[tclariss]

Bonjour

Je commence a me taper la tete contre les murs la alors il est temps de poster.

Mon probleme est simple. Je veux créer dynamiquement un noeud dans ma page web, ce noeud étant généré par un script PHP au travers d'une requete Ajax.

Voici donc les étapes :
- envoi de la requete Ajax
- génération d'un document XML par PHP
- récupération du XML par JavaScript grace à responseXML
- ajout du noeud dans la page

Ca marche trés bien mais le gros probleme est que les styles css défini dans une feuille de style ne s'appliquent pas au nouveau noeud créé dynamiquement.

Le retour de PHP :

Code :

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

1
2
3
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="http://localhost/style.css" type="text/css"?>
<ul id="content"><li class="roundt" id="li_content_1"><h1>xxx</h1><div class="text"><p>xxxx</p></div></li></ul>

Le code javascript qui place le noeud :

Code :

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

1
2
var resxml=xhr.responseXML.documentElement;
document.getElementById('container').replaceChild(resxml.cloneNode(true),document.getElementById('content'));

Une idée ?

merci

[FremyCompany]

Aucune véritable solution hélas...
Tu peux toujours essayer ca, mais on m'a dit que pour ce cas la, ca ne marche pas...
http://www.developpez.net/forums/sho...?t=6259&page=2

[tclariss]

en tatonant un peu j'ai constaté que si je recréais le noeud avec les fonctions dom de javascript et que j'inserais ce nouveau noeud, les styles css étaient bien appliqués

une petite fonction récursive que voici et le tour est joué

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
function transformXML(node) {
	if(node.nodeType==3)
		return document.createTextNode(node.nodeValue);	
	else {
		var new_node=document.createElement(node.tagName);
		var i;
		for(i=0;i<node.attributes.length;i++) {
			new_node.setAttribute(node.attributes[i].nodeName,node.getAttribute(node.attributes[i].nodeName));	
		}
		for(i=0;i<node.childNodes.length;i++) {
			new_node.appendChild(transformXML(node.childNodes[i].cloneNode(true)));	
		}
		return new_node;
	}
}

il faut passer en parametre de la fonction le documentElement de la réponse en XML de la requete Ajax et en gros javascript copie le noeud

et ca marche (enfin pour ce que je lui fais faire il y a surement des cas ou ca marche pas mais la fonction est extensible)

que pensez vous de cette solution ?

[FremyCompany]

en tatonant un peu j'ai constaté que si je recréais le noeud avec les fonctions dom de javascript et que j'inserais ce nouveau noeud, les styles css étaient bien appliqués

une petite fonction récursive que voici et le tour est joué

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
function transformXML(node) {
	if(node.nodeType==3)
		return document.createTextNode(node.nodeValue);	
	else {
		var new_node=document.createElement(node.tagName);
		var i;
		for(i=0;i<node.attributes.length;i++) {
			new_node.setAttribute(node.attributes[i].nodeName,node.getAttribute(node.attributes[i].nodeName));	
		}
		for(i=0;i<node.childNodes.length;i++) {
			new_node.appendChild(transformXML(node.childNodes[i].cloneNode(true)));	
		}
		return new_node;
	}
}

il faut passer en parametre de la fonction le documentElement de la réponse en XML de la requete Ajax et en gros javascript copie le noeud

et ca marche (enfin pour ce que je lui fais faire il y a surement des cas ou ca marche pas mais la fonction est extensible)

que pensez vous de cette solution ?

Ca empêche surment le JS de fonctionner... mais il y a de l'idée...

[tclariss]

que veux tu dire par ca empeche le JS de fonctionner ?

écoutes ca marche nickel sur firefox. sous IE bien sur ca ne marche pas mais bon dans mon cas particulier ce n'est pas trés grave. a tout hasard si tu peux me mettre sur une piste ca m'interesserait quand meme.

[FremyCompany]

imagine le code suivant : <script>alert('')</script>

[tclariss]

oui forcement mais j'ai imagnié cette function dans l'optique de transformer un document xml généré par un script php en noeud xml intégrable dans une page web