Discussion :

[grinder59]

Bonjour à tous,

Je galère depuis un moment sur les promesses et différés et j'aurai besoin d'un peu d'aide.
Le principe est le suivant : J'ai 3 pages avec chacune un bouton. Lorsque je clique sur le bouton d'une page ça m'affiche une modale. Cette modale, la même pour les 3 pages, est calculée à l'affichage. En fonction de la page sur laquelle je suis, je vais chercher la liste des champs à afficher. Une fois que j'ai récupéré la liste, je crée mon input de formulaire dans ma modale.

J'ai une dizaine de champs. Parmi ces champs il y a des select qui contient une liste d'éléments stockés en base. Je veux charger dynamiquement les éléments des listes select à l'affichage de la modale. Pour cela j'appelle une url en ajax de la façon suivante :

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
 
foreach(...){ // parcours des champs à afficher
	string = '';
	if (typeColonne == 'texte'){
		// affichage d'un input de type text
		string += '<input type="text">';
	}
	else if (typeColonne == 'select'){
		var tmp_string = '<select>';
 
		var prom = 
			$.ajax({			
				url 	: urlListeReference,
				type 	: 'post',
				data	: 'r='+listeARecuperer,
				dataType: 'json'
			})
			.done(function( retour ) {
				$.each(retour, function(i, item){
					tmp_string += '<option value="'+item.id+'">'+item.value+'</option>';			
				});
				tmp_string += '</select>';
			});
		prom.done(function(){
			string += tmp_string;
		});
	}
}

Le souci est que malgré l'utilisation d'une promesse (prom), le code n'attend pas la fin de l'ajax. Du coup je me dit que je ne dois pas faire les choses correctement (ou que je n'ai pas compris le fonctionnement des promesses). Auriez-vous une idée ?

Merci !

[Watilin]

Bonjour,

Tu as plusieurs choses à vérifier. D’abord, la portée de ta variable string : tu ne la déclares pas avec var dans ta boucle donc je suppose qu’elle est soit déclarée dans un contexte supérieur, soit globale par défaut. Dans les deux cas, d’autres parties du script peuvent interférer. Il n’y a aucun problème à ajouter var ici même si une autre variable string existe dans le contexte supérieur, JavaScript sait faire la part des choses, ce seront bien deux variables différentes.

Ensuite, tu sembles avoir bien compris le fonctionnement des promesses. Juste un détail, ici tu n’est pas obligé d’utiliser une variable puisque les méthodes de promesses sont chaînables :

Code :

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

1
2
3
4
5
6
7
8
9
    $.ajax({
      ...
    })
    .done(function (retour) {
      ...
    })
    .done(function () {
      string += tmp_string;
    });

Et même, tout ce qui se passe dans ta première fonction .done() est synchrone, donc tu n’as pas besoin de la seconde et tu peux fusionner les deux :

Code :

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

1
2
3
4
5
6
7
8
    $.ajax({
      ...
    })
    .done(function (retour) {
      ...
 
      string += tmp_string;
    });

Le véritable problème est que ta dernière fonction .done() ne fait rien d’utile ! Elle change simplement la valeur d’une variable. Mais si une autre partie de ton code compte sur cette variable pour construire ton HTML, elle n’a aucune chance de le faire au bon moment ! Tu dois contruire l’input dans cette fonction