[AJAX] Insertion de XHTML avec AJAX

**Anonymouse** · 26/05/2009, 22h02

Bonjour

Je souhaite, dans une page en xhtml ajouter un bloc Xhtml qui m'est transmit par une requête Ajax. J'utilise le code suivant mais mal grès que le bloc ajouté apparaisse dans le code source de la page et dans Firebug. Il n'est pas "formaté".

Voici la page HTML devant être modifiée.

Code xhtml :

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
 
<body>
    <div id="corpsPage">
        <fieldset>
            <legend>Sélection</legend>
             <p>
                    <select name="employees" id="employees">
                        <option value="ROBERT Marcel">ROBERT Marcel</option>
                        <option value="ELOISE Lecroix">ELOISE Lecroix</option>
                        <option value="LEBRETON">LEBRETON</option>
                    </select>
            </p>
        </fieldset>
        <div id="informationsProfessionnelles">
            <p>TEST</p>
        </div>
    </div>
</body>

Et voilà le code exécutant la requête Ajax:

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
 
    var xhr = null;
    xhr = getXhr();
    xhr.onreadystatechange = function() {
        try {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var tmp = xhr.responseXML.getElementsByTagName("fieldset");
                    var element = document.getElementById("informationsProfessionnelles");
                        element.appendChild(tmp.item(0));
                }
        }
        catch(e) {
            alert("Exception: " + e);
        }
    }
    xhr.open("POST", "xmlEmployee.xml", true);
    xhr.send(null);

Le code XML devant être inséré.

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?xml version="1.0" encoding="UTF-8"?>
 
<root>
	<fieldset id="informationsProfessionnelles">
		<legend>Informations professionnelles</legend>
		<p>
			Paragraph
		</p>
	</fieldset>
</root>

Et le rendu final.

Le rendu que j'obtiens lorsque j'ajoute le code à la mano est le suivant:

Les noeuds ne sont pas du bon type. Que puis-je faire pour réaliser ce que je veux: réutiliser du code XHTML dans ma page.

**nicols** · 26/05/2009, 23h34

salut,

je ne sais pas si ça peut t'aider, moi je n'envoie pas les données de la même manière :
avec mootools pour l'ajax, et ensuite dans ton code xml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?xml version="1.0" encoding="UTF-8"?>
 
<root>
	<fieldset id="informationsProfessionnelles">
		<legend>Informations professionnelles</legend>
		<p>
			Paragraph
		</p>
	</fieldset>
</root>

je ne mets pas les balises xml et root, d'ailleurs si tu peux m'expliquer je dormirais moins con

, parce que moi j'envoie des requetes html avec mootools, mais dans la console d'erreurs ff, il me dit "mal formé ... <root>...</root> ...", donc ça a peut-être quelque chose à voir

Enfin tout ça pour dire que moi à la fin de ma page récupérée (c'est du php mais l'esprit est le même), je mets  , et j'ai longtemps galeré à cause de la mise en forme css des requêtes ajax mais avec ça, ça marche

J'espère que ça va t'aider

**emmanuel.remy** · 27/05/2009, 00h52

Salut,

Les noeuds ne sont pas du bon type. Que puis-je faire pour réaliser ce que je veux: réutiliser du code XHTML dans ma page.

Effectivement. N'oublie pas que tu manipules du XML et pas du HTML. Donc tu dois indiquer le namespace qui porte les noeuds fieldset et autres.
Je ne sais pas quelle XHTML tu utilises mais ta structure XML devrait ressembler à celà:

Code :

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

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<root>
	<fieldset xmlns="http://www.w3.org/1999/xhtml" id="informationsProfessionnelles2">
		<legend>Informations professionnelles</legend>
		<p>
			Paragraph
			<input type="text" name="test" value="OK" />
		</p>
	</fieldset>
</root>

Et attention aux id car il sont dupliqués dans ton code initial.

Bon dev,

ERE

**Anonymouse** · 27/05/2009, 09h53

Envoyé par nicols

salut,

je ne sais pas si ça peut t'aider, moi je n'envoie pas les données de la même manière :
avec mootools pour l'ajax, et ensuite dans ton code xml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?xml version="1.0" encoding="UTF-8"?>
 
<root>
	<fieldset id="informationsProfessionnelles">
		<legend>Informations professionnelles</legend>
		<p>
			Paragraph
		</p>
	</fieldset>
</root>

je ne mets pas les balises xml et root, d'ailleurs si tu peux m'expliquer je dormirais moins con

, parce que moi j'envoie des requetes html avec mootools, mais dans la console d'erreurs ff, il me dit "mal formé ... <root>...</root> ...", donc ça a peut-être quelque chose à voir

Enfin tout ça pour dire que moi à la fin de ma page récupérée (c'est du php mais l'esprit est le même), je mets  , et j'ai longtemps galeré à cause de la mise en forme css des requêtes ajax mais avec ça, ça marche

J'espère que ça va t'aider

<?xml version="1.0" encoding="UTF-8"?> Cette ligne décrit la version XML utilisée et l'encodage.

Pour qu'un Document XML soit bien formé il faut, notamment, que l'ensemble des balises soient "encadrées" par un éléments racine. Le nom n'a pas d'importance.

Envoyé par emmanuel.remy

Salut,

Effectivement. N'oublie pas que tu manipules du XML et pas du HTML. Donc tu dois indiquer le namespace qui porte les noeuds fieldset et autres.
Je ne sais pas quelle XHTML tu utilises mais ta structure XML devrait ressembler à celà:

Code :

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

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<root>
	<fieldset xmlns="http://www.w3.org/1999/xhtml" id="informationsProfessionnelles2">
		<legend>Informations professionnelles</legend>
		<p>
			Paragraph
			<input type="text" name="test" value="OK" />
		</p>
	</fieldset>
</root>

Et attention aux id car il sont dupliqués dans ton code initial.

Bon dev,

ERE

Génial c'est tout à fait ce qu'il me fallait.
Merci beaucoup.

**Anonymouse** · 28/05/2009, 14h50

Heu je crois que je me suis avancé trop vite.

Si la méthode fonctionne avec Firefox, elle ne marche pas avec IE6

qui me donne l'erreur: "Cette interface n'est pas prise en charge.", lorsque je tente d'ajouter le noeud XML au noeud xhtml.

**emmanuel.remy** · 28/05/2009, 14h58

Envoyé par Anonymouse

Heu je crois que je me suis avancé trop vite.

Si la méthode fonctionne avec Firefox, elle ne marche pas avec IE6

qui me donne l'erreur: "Cette interface n'est pas prise en charge.", lorsque je tente d'ajouter le noeud XML au noeud xhtml.

Effectivement IE (toute version) a un bug à ce niveau. Dans ce cas, tu n'as pas d'autre solution que d'analyser le document xml et de regénérer les mêmes noeuds dans le HTML cible ou bien plus simple, d'effectuer un innerHTML.

Dommage, ce n'est plus aussi élégant !

ERE

**Anonymouse** · 28/05/2009, 18h14

Envoyé par emmanuel.remy

Effectivement IE (toute version) a un bug à ce niveau. Dans ce cas, tu n'as pas d'autre solution que d'analyser le document xml et de regénérer les mêmes noeuds dans le HTML cible ou bien plus simple, d'effectuer un innerHTML.

Dommage, ce n'est plus aussi élégant !

ERE

J'ai tenté la première solution: régénérer les mêmes noeuds dans le HTML cible mais impossible de récupérer les attributs des noeuds.

Je crée donc un noeud vide:

Code :

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

"document.createElement("div")"

dans lequel j'affecte ma responseText avec la propriété innerHTML. Je récupère ensuite le fils que je veux ajouter. Mais maintenant mon CSS foire

Vive IE

, et merci de ton aide.

**emmanuel.remy** · 28/05/2009, 23h41

Mais maintenant mon CSS foire

Tu veux dire que quand tu appliques ton innerHTML sur le fieldset les CSS ne s'appliquent pas ?

ERE

**nicols** · 29/05/2009, 00h05

C'est là que moi je te disais que ça me faisait pareil : les CSS ne s'appliquaient pas.
Et j'ai trouvé une solution qui a l'air de marcher pour moi : tu mets un ' ' à la fin de ce que tu as à insérer. Ca donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<root>
	<fieldset xmlns="http://www.w3.org/1999/xhtml" id="informationsProfessionnelles2">
		<legend>Informations professionnelles</legend>
		<p>
			Paragraph
			<input type="text" name="test" value="OK" />
		</p>
	</fieldset>
	&nbsp;
</root>

**emmanuel.remy** · 29/05/2009, 00h42

@Anonymouse: essaie avec ce que propose nicols, les voix de l'informatique sont parfois impénétrables !

Merci Anonymouse

ERE

**Anonymouse** · 29/05/2009, 10h01

Envoyé par emmanuel.remy

Tu veux dire que quand tu appliques ton innerHTML sur le fieldset les CSS ne s'appliquent pas ?

ERE

Au final j'utilise le noeud que j'ai créé (un fieldset) pour en remplacer un autre (fieldset également). Ces fieldset ont une

Code :

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

margin-bottom: 1%;

.

Quand je remplace le noeud le CSS de margin ne s'applique plus.

J'ai testé la solution de nicols qui ne fonctionne malheureusement pas.

En plus comme j'utilise une feuille de style externe impossible de recopier les attributs style de l'ancien noeud vers le nouveau noeud.

**Anonymouse** · 29/05/2009, 12h55

Envoyé par Anonymouse

Au final j'utilise le noeud que j'ai créé (un fieldset) pour en remplacer un autre (fieldset également). Ces fieldset ont une

Code :

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

margin-bottom: 1%;

.

Quand je remplace le noeud le CSS de margin ne s'applique plus.

J'ai testé la solution de nicols qui ne fonctionne malheureusement pas.

En plus comme j'utilise une feuille de style externe impossible de recopier les attributs style de l'ancien noeud vers le nouveau noeud.

Le problème est résolu. J'avais une image vide dans mon fildset et il faisait sauter la marge à cause ça.