[AJAX] Insertion de XHTML avec AJAX

Version imprimable

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:

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:

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:

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.

http://hfr-rehost.net/http://self/pi...30f9eaed82.png

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

http://hfr-rehost.net/http://self/pi...48662d94e9.png

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.

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:

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 :D, 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 :ccool:

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

Salut,

Citation:

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:

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

Citation:
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:

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 :D, 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 :ccool:

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.
Citation:
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:

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. :ccool:

28/05/2009, 14h50
Anonymouse

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

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.
28/05/2009, 14h58
emmanuel.remy

Citation:

Envoyé par Anonymouse

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

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.

:oops: 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
28/05/2009, 18h14
Anonymouse

Citation:

Envoyé par emmanuel.remy

:oops: 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:

"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 :aie:

Vive IE :roll:, et merci de ton aide. :ccool:
28/05/2009, 23h41
emmanuel.remy

Citation:

Mais maintenant mon CSS foire

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

ERE

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:

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>   </root>

29/05/2009, 00h42
emmanuel.remy

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

Merci Anonymouse

ERE
29/05/2009, 10h01
Anonymouse

Citation:

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:

margin-bottom: 1%;

.

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

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.
29/05/2009, 12h55
Anonymouse

Citation:

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:

margin-bottom: 1%;

.

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

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. :aie:
29/05/2009, 13h28
emmanuel.remy

Citation:

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

Je préfère ça :ccool: parce que je ne voyais pas trop d'où cela pouvait venir !

ERE