[DOM] Remplacer un objet DOM par du code HTML brut

Bonjour,

J'ai un formulaire de gestion de commandes qui me permet de cliquer sur un des éléments dans la liste des items en commande pour modifier ses imformations (prix de vente, etc...). La fonction que j'appelle en Ajax pour faire la modification me retourne le code HTML modifié pour me permettre de réafficher l'item dans la liste. Je parcours alors ma liste afin de trouver l'item dont l'ID correspond puis je souhaite remplacer le DIV à cet endroit par le nouveau code HTML que j'ai reçu. J'avais pensé faire un truc de ce genre :

Code:

---

1 2 3

var newDiv = document.createElement(xmlHttp.responseText); divDetail.replaceChild(oldDiv, newDiv);

---

Bien entendu, createElement() n'est pas construite pour absorber un bout de code HTML et en faire un ou plusieurs objets DOM, j'ai donc le message d'erreur "Argument non valide" au niveau de l'appel à replaceChild(). J'aimerais savoir comment je devrait m'y prendre pôur remplacer mon objet DOM par mon nouveau code HTML. Est-ce possible d'ajouter du contenu en plein millieu du innerHTML de l'objet parent? Est-ce possible de créer un objet DOM à partir de code HTML alors que ce code HTML ressemble à cela :

Code:

---

1 2 3 4 5 6 7 8 9 10

<div class="section_detail_ligne" id_pc="882" type_item="0" id_item="10279" id_couleur="3" id_tissus="1"> <div class="section_detail" style="width:45px; text-align:center;">PR</div> <div class="section_detail" style="width:500px; text-align:left;">BILL 1538-002-TC</div> <div class="section_detail" style="width:174px; text-align:left;">Black</div> <div class="section_detail" style="width:174px; text-align:left;">Custom Fabric</div> <div class="section_detail" style="width:52px; text-align:center;">1</div> <div class="section_detail" style="width:67px; text-align:right;">249,00 $</div> <div class="section_detail" style="width:22px; text-align:right;"><img src="img/modifier.png" border="0" onclick="load_mod_form(this.parentNode.parentNode.id_pc)" style="cursor:pointer"></div> </div>

---

Bon, j'ai réussi à régler une partie du problème. D'abord, l'utilisation de replaceChild() requiert que le premier paramètre soit l'objet qui remplacera le second. Je n'ai donc plus de message argument non valide.

createElement() crée bien un objet DOM de type div avec tous les attributs qu'il comporte mais ne lui insère pas son contenu HTML, c'est à dire les autres objets DIV à l'intérieur. Existe-t-il un moyen de le faire sans démonter la chaîne de caractères avec des expressions régulières?

oui enfin faire du createElement un fourre tout ...

jette plutot un oeil là dessus
http://www.developpez.net/forums/d53...ynamique-form/

Merci SpaceFrog pour ta réponse, on peut toujours se fier sur toi pour répondre à nos questions Javascript dans un délais raisonnable. Cependant je ne vois pas en quoi ta librairie pourrait me permettre de régler le problème de base.

Je reçoit une chaîne de caractères qui représente du code HTML, ce code HTML représente un DIV qui contient 7 enfants aussi de type DIV, le 7e enfant contient un enfant de type IMG, les autres du texte. Je souhaiterais pouvoir passer cette chaîne dans un createElement() qui transformerait tout ça en "branche" à greffer à mon DOM Tree. Si cela m'est impossible, il me faudrait un moyen de supprimer mon objet DOM, puis d'aller insérer à sa place mon code HTML dans le innerHTML du parent... quelque chose de ce genre. Sinon je devrai m'amuser à tout démonter ma chaîne et monter récursivement ma "branche" DOM.

Existerait-il déjà une fonction qui prends du code HTML et le démonte dans un tableau ou un objet? Logiquement, tant qu'à le faire cette fonction créerait un objet DOM... Si cela n'existe pas, peut-être le ferai-je.

tu ne peux pas modifer ce que tu reçois en responsetext ?
si oui il faut retourner un string formatté comme un hash
ensuite un simple eval de ce hash et tu le passes ensuite en paramètre au createur d'objet ...

En fait le problème selon moi n'est pas là, le problème est que j'envoie plusieurs éléments d'un seul coup, à moins que je naie pas tout compris de ta librairie, il me faudra tout de même un hash par objet, et mon problème est justement que j'ai tous mes objets en une seule chaîne présentement et que je trouve pas à les décomposer en autant d'objets et à déterminer leur hiérarchie. Pour autant que je sache, responseText ne renvoie qu'une donnée à la fois alors soit je reçoit une donnée qui contient tout ou je dois effectuer plusieurs requêtes.

Bon alors je crois que je vais sérialiser les valeurs dont j'ai besoin pour pouvoir les utiliser pour monter ma "branche" DOM du côté Javascript. Autrement j'ai tenté de me monter la super fonction qui décortique du code HTML mais je me suis buté à certaines difficultés car je ne maîtrise pas très bien les expressions régulières. Pour ceux qui souhaiteraient travailler là-dessus et terminer ma fonction, bien à vous, n'hésitez pas à la poster à la suite de ce Thread.

Code:

---

1 2 3 4 5 6 7 8 9

function HTML2DOM(strHTML) { var matches = strHTML.match(/<?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)?>*/g); if(matches != null) { var nb_matches = matches.length; for(var m = 0; m < nb_matches; m++) alert(matches[m]); } else return false; }

---

Jusqu'à présent, ça décortique moyennement bien le code HTML que je lui pousse mais les fins de balisent n'ont pas leur "<" et les virgules à l'intérieur de mes expressions coupent celles-ci car le résultat de la commande match() sont séparés par des virgules, ce qui cause un conflit entre les symboles. Une fois ces erreur corrigées, il ne resterait plus qu'à déterminer si l'expression est un tag HTML, si oui faire un createElement, sinon faire un innerHTML. Amusez-vous!

tu pourrais retourner plusieurs hash avec un separateur et spliter à l'arrivée et evaluer chaque element du split
ou encore faire un seul hash de hashes

Code:

---

retour= eval("{0:{....},1:{.....}}")

---

et un seul éval
puis tu passes chaque element du hash par la liob de creation d'objets

retour[0] ...

Je ne suis pas un pro des expression régulières alors ça va me prendre un petit moment. Je termine donc ce Thread ici. Merci beaucoup pour tes conseils SpaceFrog, ils me seront très utiles. Je ressuciterai ce post lorsque j'aurai terminé!