Vider un element par le DOM

Bonsoir à tous !

J'ai ce formulaire à cette url . Rendez vous à la zone informations professionnelles et plus exactement à la ligne choisir une Administration. Sur cette liste déroulante, choisissez "MINADER" par exemple, un bloc <div id="services"></div> se remplit dynamiquement par les services de l'administration choisie, sous forme de boutons radio. En cliquant sur un des boutons, un second blocs <div id="services_select"></div> se remplit aussi dynamiquement par les structures du service choisi ci haut. Un double clic sur le bouton radio "Déconcentrés" remplit doublement le bloc <div id="services_select"></div>. Pourtant lors du lancement de la fonction filldata(event) qui remplit cette div, je la vide ainsi

Code:

---

1 2 3 4 5 6 7 8 9

function filldata(event){ var container = document.getElementById('services_select'); while (container.firstChild) { container.removeChild(container.firstChild); } // reste du code ... }

---

Pourquoi ce doublement???

Merci d'avance....

teste le firstChild

selon les navigateurs il ne pointe sans doute pas sur l'élément attendu ...

Citation:

---

Envoyé par SpaceFrog

teste le firstChild

selon les navigateurs il ne pointe sans doute pas sur l'élément attendu ...

---

Pensiez vous vraiment que ce problème est dû à firstChild? Comment vider id="services_select" lors de chaque lancement de filldata()?

Merci d'avance...

Bonjour,

Avec une méthode moins jolie ?

Code:

---

1 2 3

var container = document.getElementById('services_select'); container.innerHTML = "";

---

Citation:

---

Envoyé par vermine

Avec une méthode moins jolie ?

Code:

---

1 2 3

var container = document.getElementById('services_select'); container.innerHTML = "";

---

---

Merci ça marche:ccool:

N'est-il pas possible de résoudre autrement par le DOM car l'utilisation de innerHTML n'est pas beaucoup recommandée, car dit-on est une méthode propriétaire IE?

Oui je sais mais vous ne vouliez pas suivre l'avis de SpaceFrog donc je vous ai proposé quelque chose d'autre. :P

j'avais réalisé une méthode dans ce genre :

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

var cleanNode = function (CurrentNode){   //Récupération de tous les noeuds enfants while (CurrentNode.childNodes.length>0) { //Si le premier enfant a des enfants appel récursif de la méthode if(CurrentNode.firstChild.childNodes.length>0){ cleanNode(CurrentNode.firstChild); } //Sinon on parcours ses propriétés pour supprimer les évènements lié aux objet, puis destruction de l'objet else{   var tempo = CurrentNode.firstChild ; var a = tempo.attributes, i, l, n; if (a) { l = a.length; for (i = 0; i < l; i += 1) { n = a[i].name; if (typeof tempo[n] === 'function') { tempo[n] = null; } } } tempo = null; CurrentNode.removeChild(CurrentNode.firstChild); } } };

---

Citation:

---

Envoyé par SpaceFrog

teste le firstChild
selon les navigateurs il ne pointe sans doute pas sur l'élément attendu ...

---

Je suis tout à fait d'accord avec vous, mais le but de code

Code:

---

1 2 3 4 5

var container = document.getElementById('services_select'); while (container.firstChild) { container.removeChild(container.firstChild); }

---

c'est vider totalement container et c'est normal car nous sommes dans une boucle

Code:

---

1 2 3 4

while (container.firstChild) { container.removeChild(container.firstChild); }

---

tant que container aura un firstChild, le supprimer. Et cela revient bien à la formule brute

Code:

---

1 2	container.innerHTML = "";

---

essaye

Code:

---

1 2 3 4

var container = document.getElementById('services_select'); while (container.hasChildNodes) { container.removeChild(container.childNodes[0]); }

---

as tu essayé ma méthode ?

Citation:

---

Envoyé par okoweb

Pourquoi ce doublement???

---

Parce que tu fais des appels AJAX asynchrones... donc si tu cliques plusieurs fois avant la réponse, tu vides un élément pas encore rempli puis tu le remplis plusieurs fois.

en jquery:

Code:

---

$('services_select').empty()

---

il gere bien la liberation de memoire sous IE (event etc)

Citation:

---

Envoyé par Bovino

Parce que tu fais des appels AJAX asynchrones... donc si tu cliques plusieurs fois avant la réponse, tu vides un élément pas encore rempli puis tu le remplis plusieurs fois.

---

Existe-t'il une possibilité pour contourner cela?
Et si je vide l'élément après chaque réponse ajax? à ce niveau :

Code:

---

1 2 3 4 5 6 7 8 9 10

xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var rst = xhr.responseXML; //Vider la div ici à ce niveau container.innerHTML = "";   }   }

---

Merci d'avance...

faire les appels en synchrone ?

plutôt mettre un flag en attendant le retour du précédent et bloquer le bouton :)

Citation:

---

Envoyé par SpaceFrog

faire les appels en synchrone ?

---

J'ai résolu ainsi

Code:

---

1 2 3 4 5 6 7 8 9 10

xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var rst = xhr.responseXML; //Vider la div ici à ce niveau container.innerHTML = "";   }   }

---

Vider container après chaque réponse ajax.

Et en ce qui concerne innerHTML et removeChild, le problème n'était pas à ce niveau.

Code:

---

1 2 3 4 5

var container = document.getElementById('services_select'); while (container.firstChild) { container.removeChild(container.firstChild); }

---

J'ai toujours vidé ainsi et c'a toujours marché.


Je pense le problème était dû au fait des appels AJAX asynchrones...

Merci d'avance. Je mettrai en résolu après vos retours...

:ccool: