Discussion :

[PandaMan]

Bonjour,
je suis totalement nouveau dans le développement web et j'utilise l'ajax pour un projet personnel qui vise à m'améliorer en dev web^^

Voilà mon problème:
j'ai créé un script qui permet d'ajouter ou de supprimer des lignes à un tableau en fonction du nombre de ligne qu'il y a déjà et du nombre que l'on veut.
Lorsque que j'ajoute une ligne à mon tableau, j'appelle une page php qui me renvoi un select contenant diverses infos qui sont dans une base:

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
29
30
31
32
33
34
35
		     for(var i=0;i<nombre_lignes_voulu-nombre_lignes_courant;++i){
			var ligne = document.getElementById("tableau_armes").insertRow(-1);
			for(var j=1;j<=document.getElementById("tableau_armes").rows[1].cells.length;++j){
				ligne.insertCell(-1);
			}
 
			var xhr_object = null;
 
			if(window.XMLHttpRequest) // Firefox
			   xhr_object = new XMLHttpRequest();
			else if(window.ActiveXObject) // Internet Explorer
			   try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			else { // XMLHttpRequest non supporté par le navigateur
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
			   return;
			}	
 
			var filename = "mapage.php";
 
			xhr_object.open("GET", filename, true);
 
 
			xhr_object.onreadystatechange = function() {
			   if(xhr_object.readyState == 4) {			
				ligne.cells[0].innerHTML = xhr_object.responseText;				
				}
			}
			xhr_object.send(null);					
		}
	}
}

Le problème de ce code c'est qu'il insère le bon nombre de lignes, par contre sur toutes les lignes qui sont ajoutés, seule le select de la dernière ligne est affiché, pas les autres.

J'ai essayé de modifier mon code en mettant la partie " ajout d'une ligne" dans la fonction qui est exécutée quand on a reçu les infos:

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
29
30
31
32
33
34
35
 
for(var i=0;i<nombre_lignes_voulu-nombre_lignes_courant;++i){
 
 
			var xhr_object = null;
 
			if(window.XMLHttpRequest) // Firefox
			   xhr_object = new XMLHttpRequest();
			else if(window.ActiveXObject) // Internet Explorer
			   try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			else { // XMLHttpRequest non supporté par le navigateur
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
			   return;
			}	
 
			var filename = "mapage.php?num="+(i+1);
 
			xhr_object.open("GET", filename, true);
 
 
			xhr_object.onreadystatechange = function() {
			   if(xhr_object.readyState == 4) {			
				var ligne = document.getElementById("tableau_armes").insertRow(-1);
				for(var j=1;j<=document.getElementById("tableau_armes").rows[1].cells.length;++j){
					ligne.insertCell(-1);
				}
				ligne.cells[0].innerHTML = xhr_object.responseText;				
				}
			}
			xhr_object.send(null);					
		}

Et cette fois toutes les lignes insérées ont leur menu déroulant, mais soit il ne m'insère pas autant de lignes qu'il faut, soit il en insère trop

D'après moi, le problème doit être que pendant que la page php traite la requête et renvoie la réponse, le script itère sur la boucle et quand la réponse du serveur arrive bah on est dans l'attente de la dernière réponse et les autres on les attends plus.

Mais je sais pas trop comment contourner ce problème :/
J'ai cru lire qu'on pouvait dire au navigateur de ce bloquer le temps de recevoir la réponse du serveur mais si je peux l'éviter ça serait pas mal x)

Merci d'avance

[Bovino]

C'est surtout que dans ta boucle, tu déclares la variable

Code :

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

var xhr_object = null;

donc à chaque itération, l'appel précédent est écrasé !

[PandaMan]

je viens de tester en sortant le var xhr_object = null; de la boucle mais ça ne change rien.

Peut-être qu'en utilisant un tableau de xhr_object ça marchera?

[Watilin]

Salut,

c'est un problème de closure à mon avis.
http://javascript.developpez.com/faq...lick.dynamique
(si si, il y a un rapport ^^)

tu références xhr_object en dur dans ta fonction de rappel onreadystatechange. Essaye en mettant this à la place.

(tu as été sur robloche ?)

Sinon, remarque à propos de tes boucles for :

Code JS :

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

for (var i = 0; i < expression_machin; ++i)

Il vaut mieux pré-calculer l'expression_machin :

Code JS :

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

1
2
var machin = expression_machin;
for (var i = 0; i < machin; ++i)

Ça permet d’économiser quelques cycles de calcul.

[epsilon68]

tu as pensé à utiliser JQuery?