[AJAX] createElement, getElementById, cache

Bonjour,

Je rencontre un petit problème :

Je dispose d'une fonction qui me permet d'ajouter une div à la volée avec un id précis (bloc_div_1, blod_div_2, etc.) sans recharger la page.

Le problème est que getElementById(nouveau_bloc) renvoie "null" tant que la page n'a pas été rechargé.

Est-il possible de spécifier au getElementById d'effectuer la recherche dans la page en cours et non pas dans la page "cachée" ?

Merci.

Salut,

C'est peut-être plutôt ta fonction qu'il faudrait revoir , non ? ;)

ERE

C'est fort possible :), mais étant débutant en javascript je ne voit pas comment je pourrais faire.

Bien sur je pourrais recharger la page a chaque ajout de nouvelle div, mais l' "intérêt" de cette application AJAX est de pouvoir faire ses traitements sans rechargement.

Donc si qqun a une idée je suis preneur !

Salut,

Citation:

---

Est-il possible de spécifier au getElementById d'effectuer la recherche dans la page en cours et non pas dans la page "cachée" ?

---

J'ai rien compris :koi:
getElementById effectue une recherche par rapport au DOM... le cache n'a rien à voir là dedans :?
J'imagine comme emmanuel.remy que ton problème vient de ta fonction, mais sans la voir il est impossible de t'aider plus.

Pour enfoncer le clou :aie:

Citation:

---

Je dispose d'une fonction qui me permet d'ajouter une div à la volée avec un id précis (bloc_div_1, blod_div_2, etc.) sans recharger la page.

---

Tout ton problème est justement la notion de avec un id précis: si c'est mal fait tu ne le verras jamais...

Citation:

---

Le problème est que getElementById(nouveau_bloc) renvoie "null" tant que la page n'a pas été rechargé.

---

Mais de toute façon si tu recharges ta page tu ne retrouveras pas les div précédentes chargées à la volées donc cela ne fonctionnera pas non plus...

ERE

Ce type de problème est parfois causé par l'insertion "brutale" d'un fragment html (je veux dire par l'intermédiaire d'innerHTML) plutôt que par le DOM, ce qui provoque parfois des erreurs lors de la récupération des éléments ajoutés.

Conclusion : comme l'ont dit les camarades qui m'ont précédé... montre nous ta fonction d'insertion ^^

Bon, je vais rééxpliquer car apparament a vouloir trop simplifier le problème je n'ai pas été clair :) :

Je développe une application AJAX permettant de mettre à jour un fichier XML ayant une DTD bien précise.

Je parse mon fichier XML (avec PHP), je l'affiche sous forme de formulaire HTML. AJAX me permet d'ajouter des éléments a mon formulaire puis de sauvegarder le formulaire dans mon fichier XML via une fonction save() qui utilise XMLHttpRequest.

Pour retirer le clou...

Citation:

---

Mais de toute façon si tu recharges ta page tu ne retrouveras pas les div précédentes chargées à la volées donc cela ne fonctionnera pas non plus...

---

En rechargeant la page je retrouve parfaitement les div précédemment créées étant données qu'elles ont été sauvegardé dans le fichier XML.

Citation:

---

Tout ton problème est justement la notion de avec un id précis: si c'est mal fait tu ne le verras jamais...

---

Justement ce n'est pas mal fait car au rechargement de la page les id sont corrects.

Citation:

---

getElementById effectue une recherche par rapport au DOM... le cache n'a rien à voir là dedans

---

Là est le problème, j'ai l'impression que les "document.createElement" ne met pas à jour le DOM.

Citation:

---

Conclusion : comme l'ont dit les camarades qui m'ont précédé... montre nous ta fonction d'insertion ^^

---

Voilà :) :

Code:

---

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

function addBrand(id) { var li_brand = document.createElement('li'); var input_title_brand = document.createElement('input'); var input_requete_brand = document.createElement('input');   input_title_brand.setAttribute("name","level2_titles["+id+"][]"); input_title_brand.setAttribute("class","inputText"); input_title_brand.setAttribute("value","Brand name");   input_requete_brand.setAttribute("name","level2_requetes["+id+"][]"); input_requete_brand.setAttribute("class","inputText"); input_requete_brand.setAttribute("value","Brand requete");   li_brand.appendChild(input_title_brand); li_brand.appendChild(input_requete_brand);   alert(document.getElementById("brand_list_"+id)); document.getElementById("brand_list_"+id).appendChild(li_brand); }   function addCategory() { var li_category = document.createElement('li'); li_category.setAttribute("class","category_li");   var input_title_category = document.createElement('input'); input_title_category.setAttribute("name","level1_titles[]"); input_title_category.setAttribute("class","inputText"); input_title_category.setAttribute("onChange","save()"); input_title_category.setAttribute("value","Category name");   var input_requete_category = document.createElement('input'); input_requete_category.setAttribute("class","inputText"); input_requete_category.setAttribute("name","level1_requetes[]"); input_requete_category.setAttribute("onChange","save()"); input_requete_category.setAttribute("value","Category requete");   var aDelete = document.createElement('a');   aDelete.setAttribute("href","#"); aDelete.setAttribute("onClick","deleteCategory(this.parentNode)"); aDelete.appendChild(document.createTextNode("delete"));   li_category.appendChild(input_title_category); li_category.appendChild(input_requete_category); li_category.appendChild(aDelete);   var ul_brand = document.createElement('ul'); var li_brand = document.createElement('li'); var input_title_brand = document.createElement('input'); var input_requete_brand = document.createElement('input');   var id = document.getElementsByName('level1_titles[]').length; input_title_brand.setAttribute("name","level2_titles["+id+"][]"); input_title_brand.setAttribute("class","inputText"); input_title_brand.setAttribute("value","Brand name");   input_requete_brand.setAttribute("name","level2_requetes["+id+"][]"); input_requete_brand.setAttribute("class","inputText"); input_requete_brand.setAttribute("value","Brand requete");   var aAddBrand = document.createElement('a');   aAddBrand.setAttribute("href","#"); aAddBrand.setAttribute("onClick","addBrand("+id+")"); aAddBrand.appendChild(document.createTextNode("add Brand"));   li_brand.appendChild(input_title_brand); li_brand.appendChild(input_requete_brand);   ul_brand.appendChild(li_brand); li_category.appendChild(ul_brand); li_category.appendChild(aAddBrand)   document.getElementById('category_list').appendChild(li_category); save(); }

---

Le problème est lorsque j'effectue un addCategory() suivit d'un addBrand(id). Le addBrand ne trouve pas la catégorie précédemment créé.

Merci de votre aide :)

Re,

Si ton id de catégorie est "brand_list_"+id alors je ne vois pas où tu le crées dans addCategory. :?

ERE

Salut,
Avec

Citation:

---

input_title_brand.setAttribute("name","level2_titles["+id+"][]");

---

Tu auras des problèmes sous Internet Explorer

Code:

---

1 2 3 4 5 6 7 8 9

if(document.all)//Pour IE { var var input_title_brand = document.createElement('<input name="level2_titles['+id+'][]">'); } else //Pour les autres { var input_title_brand = document.createElement('input'); input_title_brand.setAttribute("name","level2_titles["+id+"][]"); }

---

Il y a un test qui serait intéressant à faire : si tu appelles addBrand juste après addCategory, décale un peu dans le temps ton appel à la fonction addBrand, par exemple :

Code:

---

1 2 3 4

addCategory(params); setTimeout(function() { addBrand(params); }, 100);

---

Et dis-nous si ça donne au navigateur le temps de "digérer" les insertions DOM faites dans addCategory ^^


edit : mais attention quand même à la portée des variables ^^
le code exécuté dans la fonction anonyme n'a pas connaissance des variables locales à la fonction de départ (celle qui contient mon extrait)

Citation:

---

Envoyé par emmanuel.remy

Re,

Si ton id de catégorie est "brand_list_"+id alors je ne vois pas où tu le crées dans addCategory. :?

ERE

---

Exact !
J'ai ajouté

Citation:

---

ul_brand.setAttribute("id","brand_list_"+id);

---

et ca a fonctionné.

Pour ce qui de l'incompatibilité d'IE, je vais vérifier mais ce n'ai pas trop grave car c'est une application qui sera utilisé en interne.

Je suis désolé de vous avoir fait perdre votre temps.

Merci de votre aide :)