Discussion :

[Thielaco]

bonjour,
je cree une page de gallerie photo en utilisant ajax pour passer d'une page a une autre. dans mon script, je fais une boucle pour changer mes src et mes parametres event. au niveau de l4affichage des img id... src.... tout est correct.
j'utilise le meme principe pour mes event listener (click -> envoi des parametres du src lien.. ) et la, la nouvelle page s'ouvre bien mais avec la derniere photo de la page gallerie.
la variable est image2Load je la checke dans la console quand la boulcle tourne, elle est correcte mais on dirait que quand l'event survient, elle passe a sa derniere valeur de boucle...
au debut, je pensait a une erreur de syntaxe sur l'appel de dataExport si c'est le cas j'ai pas reussi a mettre le doigt dessus...
j'ai eu le meme soucis pour mes boutons de page la variable page me donnait une erreur mais pas sa valeur.. j'ai contourne avec des tests mais fire une serie de 50 tests pour affecter la bonne string au bon lien.... c'est pas du bon travail
si quelqu'un a une idee....

voici le code

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
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
function updateGallery(user,page) {
		var url = "http://127.0.0.1/wp-content/data/users/" + user + "_list.txt";
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				var imagePerPage = 50
				var listImage = JSON.parse(this.responseText);
				var nombrePage = (Math.trunc(listImage.length / imagePerPage)) + 1;
				var imageFlag;
				var dateUpload;
				var image2Load;
				var fileName;
				var filePath;
				var sourcePath ="my-gallery";
 				var pagePath = "my-photo-view";
 				var counter = 0;
				//console.log(page);
				for (x = (page - 1) * imagePerPage; x < (page * imagePerPage) ; x++)
				{
					if (x < listImage.length) 
					{	
						imageFlag = listImage[x].slice(0, 2);
						dateUpload = (listImage[x].slice(3, 7));
						fileName = listImage[x].slice(12, 24);
						image2Load = dateUpload + '_' + user + '_' + fileName;
						switch (imageFlag) {
 							case "LH" :
 								filePath = "http://127.0.0.1/wp-content/uploads/Locked2.jpg";
 								break;
 							case "LV" :
 								filePath = "http://127.0.0.1/wp-content/uploads/Locked.jpg";
 								break;
 							case "MH" :
 								filePath = "http://127.0.0.1/wp-content/uploads/Moderate2.jpg";
 								break;
 							case "MV" :
 								filePath = "http://127.0.0.1/wp-content/uploads/Moderate.jpg";
 								break;
 							default :
 								filePath = "http://127.0.0.1/wp-content/uploads/" + user + "/" + dateUpload + "/T_" + fileName;
 						}
 					} else {
 						filePath = "";
 					}
 					var child = document.getElementById("Link" + (x % imagePerPage + 1));
 					var para = document.createElement("a");
 					para.id = "Link" + (x % imagePerPage + 1);
 					var parent = document.getElementById("galleryPage1");// + (page - 1));
 					parent.replaceChild(para, child);
 					var para = document.createElement("IMG");
 					para.src = filePath;
 					para.id = "Image" + (x % imagePerPage + 1);
 					para.style = "";
 					var parent = document.getElementById("Link" + (x % imagePerPage + 1));
 					parent.appendChild(para);
 					document.getElementById("Link" + (x % imagePerPage + 1)).addEventListener("click", function() { dataExport(user,sourcePath,counter,pagePath,image2Load);});
 
				}
 
				updateButton(page, nombrePage, user);
				jQuery("#galleryPage1").justifiedGallery();
			}
		}
		xhttp.open("GET", url, true);
		xhttp.send();
	};

[Watilin]

Salut,
c’est un problème de fermetures (closures) : ta variable déclarée avec var existe en-dehors du contexte de la boucle for, et continue d’exister après la fin de la boucle. Tout code asynchrone qui utilise cette variable (en l’occurence, le gestionnaire "onclick") verra la dernière valeur.

Tu peux « capturer » la valeur voulue en entourant le corps de la boucle for avec une fonction immédiatement invoquée :

Code :

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

1
2
3
4
for (x = (page - 1) * imagePerPage; x < (page * imagePerPage) ; x++)
(function (x) {
    ...
})(x);

Une remarque au passage : je n’ai pas vu la déclaration de x. Je te conseille de toujours déclarer tes variables et d’utiliser le mode strict.

Tu as aussi la possibilité d’utiliser let qui, contrairement à var, crée une portée différente à chaque itération. C’est probablement plus efficace en termes de performances (à mon avis) que d’utiliser une fonction comme ci-dessus. Dans tous les cas, ça fait un code plus lisible.

Code :

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

1
2
3
4
for (let x = (page - 1) * imagePerPage; x < (page * imagePerPage) ; x++)
{
    ...
}

La vieille page de FAQ Comment attribuer à des objets un onclick faisant appel à une variable de boucle ? présente également un moyen de mémoriser la valeur en l’attachant à l’élément DOM (dans la FAQ une div, dans ton cas une image) en tant que propriété expando. (Note, les expando ne sont pas toujours considérés comme une bonne pratique car il y a un risque de conflit de noms.)

[Thielaco]

je te remercie pour ton explication et je vais mettre tout ça en pratique... c pas gagné, mon cerveau a un probleme psychomoteur avec les closures, peut etre parce que les exemples donnes sont toujours pour des compteurs...