Discussion :

[okoweb]

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 :

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

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

[SpaceFrog]

teste le firstChild

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

[okoweb]

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

[vermine]

Bonjour,

Avec une méthode moins jolie ?

Code js :

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

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

[okoweb]

Avec une méthode moins jolie ?

Code js :

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

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

Merci ça marche

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?

[vermine]

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

[le_chomeur]

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

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
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);
			}
		}
	};

[okoweb]

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 :

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

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 :

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

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 :

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

1
2
 
container.innerHTML = "";

[SpaceFrog]

essaye

Code :

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

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

[le_chomeur]

as tu essayé ma méthode ?

[Bovino]

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.

[epsilon68]

en jquery:

Code :

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

$('services_select').empty()

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

[okoweb]

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 :

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

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

[SpaceFrog]

faire les appels en synchrone ?

[le_chomeur]

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

[okoweb]

faire les appels en synchrone ?

J'ai résolu ainsi

Code :

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

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 :

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

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