Discussion :

[jul13s]

Bonjour tout le monde !

Je rencontre une difficulté avec le morceau de code suivant, j'affiche a un endroit une somme de nombre récupéré dans ma BDD. Cela fonctionne le probleme que je rencontre c'est que tous les nombres défilent à l'écran car mon "document.getElementById('nbr_page').innerHTML = nombre_fiche;" est à l'intérieur de la boucle for... mais quand je le sort de la boucle cela ne fonctionne plus ... j'imagine que ca va être très simple à résoudre pour quelqu'un qui connait JS mais je m'y casse les dents depuis des heures ...

Pour résumer j'aimerais affiché uniquement le nombre final et pas tous les nombres jusqu'a arrivé a la somme complète... J'espere avoir été clair ...



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
function calcul_nbr_page() 
{
	var x;
	var nombre_fiche=0;
	for (x = 1; x < 21; x++) 
	{
		var val_fiche;
		if (document.getElementById('select_fiche_'+x) != null)
		{
			val_fiche= document.getElementById('select_fiche_'+x).value;
			$.ajax({
				type:"POST",
				url:"js/ajax/nbr_fiche_recup.php",
				data:"id_fiche=" + val_fiche,
				success:function(data)
				{
					nombre_fiche = nombre_fiche + parseInt(data);
					document.getElementById('nbr_page').innerHTML = nombre_fiche;
				}
			})
		}
	}
}

[SpaceFrog]

pourquoi la boucle for à ce moment là ?

Passe les bornes à to ajax
fait le traitement et la somme coté serveur, et ne retourne qu'une seule valeur ...

[jul13s]

La boucle For me permet de récupérer les valeur de plusieurs select et j'ai une autre fonction qui me permet d'ajouter des select. Du coup je vois pas comment faire en 1 seule fois si je sais pas a l'avance les identifier.

[Invité]

Bonjour,

si j'ai bien compris SpaceFrog, l'idée est de :

• 1- via la boucle : "récolter" tous les id_fiche (dans un array JS, ou une variable JS de la forme "id1-id13-id25-...")
• 2- APRES la boucle : faire UN SEUL appel Ajax, en transmettant TOUS les id_fiche.
• 3- dans le fichier PHP appelé : boucler (en PHP) * sur les id_fiche, faire l'addition, et renvoyer le total
• 4- en JS : afficher ce total

* Eventuellement (on ne sait pas comment tu récupère le nombre de page dans la BDD) -> mais on peut envisager de récupérer la SOMME directment via une requête SQL :

Code :

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

"SELECT SUM(nombre_pages) FROM ..... WHERE id_fiche IN (...,...,...,...) "

[EDIT] Ce n'est pas le même principe qu'énoncé par Watilin.

[jul13s]

Ok merci jreaux62 j'avais pas compris ca en lisant le message de SpaceFrog, oui j'y avais pas pensé, je vais essayer le coup du Array JS. Un Array ca se passe de la même manière qu'une variable simple ?

Parcontre désolé Watilin j'ai pas compris ta proposition

[jul13s]

Punaise j'étais content avec la technique du passage de Array j'ai cru que ca marchait mais finalement si je sélectionne deux fois le meme élément dans 2 select ca ne s'ajoute pas !

Du coup je vais décomposer et faire plusieurs requêtes coté serveur... Sauf s'il y a encore une solution que je n'ai pas vu !

[Watilin]

C’est pas si évident que ça en a l’air. Il faut que ton code agisse lorsque toutes les requêtes ajax ont terminé. Or, tu ne sais pas dans quel ordre elles vont aboutir, donc tu ne peux pas savoir quelle sera la « dernière ».

Bien sûr, SpaceFrog pose une bonne question : est-il vraiment nécessaire de faire plusieurs requêtes ajax ? Si tu as moyen de modifier le code serveur pour ne faire qu’une requête, c’est l’idéal.

Sinon, tu peux utiliser Promise.all() qui te permet d’attendre la fin de toutes les requêtes. Les objets ajax de jQuery sont compatibles avec les promesses.

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
function calcul_nbr_page() 
{
	"use strict";
	const lesRequetes = [];
	for (let x = 1; x < 21; x++) 
	{
		const elem_x = document.getElementById('select_fiche_' + x);
		if (elem_x !== null)
		{
			lesRequetes.push(
				$.ajax({
					method: "POST",
					url: "js/ajax/nbr_fiche_recup.php",
					data: "id_fiche=" + elem_x.value,
				})
			);
		}
	}
 
	let nombre_fiche = 0;
	Promise.all(lesRequetes).then(function (resultats)
	{
		for (const data of resultats)
		{
			nombre_fiche = nombre_fiche + parseInt(data);
		}
		document.getElementById('nbr_page').textContent = nombre_fiche;
	});
}