Discussion :

[charade]

Bonjour,

Dans un script d'importation de photos, je cherche à actualiser une progressbar (Jquery UI)
en suivant l'avancement de requêtes Ajax.
Mon problème : La progressbar, qui est censée s'afficher avant le lancement des requêtes ajax ne le fait qu'après. Je n'ai donc mon retour utilisateur visuel qu'à la fin de l'execution de ma boucle While... (La console me montre que ces requêtes s'éxecutent bien, dans l'ordre)
J'ai essayé pas mal de chose, notamment d'executer la suite des instructions dans le callback de l'affichage... sans succès...
J'ai pensé à utiliser live() ou bind(), mais je ne sais comment le tester...

Quelqu'un aurait une piste ?

Voici mon code jquery :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
	    $(function() {
 
		var etape = 0;
		var pourcent_progressbar=0;
 
		$('#les_fomulaires').submit(function() {
 
		    $('#les_fomulaires').hide(); 
		    $("#text_result").html("Importation en cours : <span class='progression'>0/0</span>").show(10, function() {
 
			$("#myprogressbar").progressbar({value:pourcent_progressbar});		    
			$("#myprogressbar").show(10, function() {
 
			    if (jQuery.trim($("#id_src").val()).length!=0) {
				// Récupèrer le nombre de photos à importer
				$.ajax({
				    type : 'POST',
				    async : false,
				    url : '/nbphotos.php',
				    data : 'chem=$cheminimport',
				    success : function(nbphotos){
					if (nbphotos>0){
					    $(".progression").html("0"+" / "+nbphotos);
 
						var fini=false;
						var nb_photos_imported=0;
						var ajax_reussi = false;
						var resultat_ajax="";
						// Variables envoyées en Ajax
						var datas = desvariables;
						while (nb_photos_imported < nbphotos) {
 
						    ajax_reussi = false;
 
						    $.ajax({
							type : 'GET',
							async : false,
							url : '/traitement.php',
							data : datas,
							success : function(resultat){
							    resultat_ajax=resultat;
							    ajax_reussi=true;
							    nb_photos_imported++;
							}
						    });
 
						    if (ajax_reussi==true){
							if (resultat_ajax=="ok") {
							    pourcent_progressbar = Math.floor(nb_photos_imported*100/nbphotos);
							    $("#myprogressbar").progressbar("option", "value", pourcent_progressbar);
							    console.info("Succès ajax (resultat : OK) : "+pourcent_progressbar);
							    $(".progression").html(nb_photos_imported+" / "+nbphotos);
							} else {
							    fini=true;
							    $("#text_result").html(ajax_reussi);
							    return false;
							}					
						    } else {
							// Erreur d'execution ajax => sortir du while
							console.info("Erreur d'execution ajax "+nb_photos_imported);
							return false;
						    }					
						} // While
 
						if (fini==true) {
						    $("#myprogressbar").hide('slow');
						    $('#text_result').html("Importation de "+nb_photos_imported+" photos terminée avec succès.");
						}
 
					} else{
					    $("#text_result").html("Aucune photo à importer.");			    
					    $("#myprogressbar").hide(10);
					    $('#les_fomulaires').show("slow"); 
					}
				    }
				});
			    }
			});
		    }); // callback #text_result.show()
 
		    return false;
		});
 
 
	    });

[hariman]

Bonjour,

Pourquoi n'as-tu pas mis le bloc "if (ajax_reussi==true){ ..." dans la fonction anonyme appelée en cas de succès de la requète ("success : function(resultat){ ...") ?

Essaye pour voir

[charade]

Bonjour,

Pourquoi n'as-tu pas mis le bloc "if (ajax_reussi==true){ ..." dans la fonction anonyme appelée en cas de succès de la requète ("success : function(resultat){ ...") ?

Essaye pour voir

Même problème. (Ce bloc était déjà dans la fonction success avant nombreux tests...)

J'ai essayé d'afficher dès le départ ma progressbar, et elle ne s'actualise pas au fur et à mesure. Idem pour le petit texte en dessous dans #text_result qui ne s'actualise pas : "Importation en cours : x/y".

Donc je crois qu'il y a 2 problème à mon script :
- la mise à jour de l'affichage à la fin du while
- l'avancement progressif de la progressbar

[hariman]

Faudrait que tu cherches un autre algorithme en utilisant le mode asynchrone, car le mode synchrone bloque temporairement le naviguateur de l'utilisateur tant que la requête n'est pas terminée, par conséquent l'avancement progressif de la progressbar n'est pas visible.

Tu dois alors remplacer ton while par une autre méthode.

Essaye de construire une fonction permettant de récupérer le résultat de la requète, actualise la progressbar, puis exécute la prochaine requète s'il reste des photos.

[charade]

Je sais que la requête Ajax bloque le navigateur, mais ma tentative d'actualisation de la progressbar ne fait pas parti de l'ajax. J'ai justement fait une boucle (while ou for) pour pouvoir executer des instructions entre les différentes requête Ajax. Le fichier /traitement.php importe une seule photo à chaque passage.

Dans la console, j'ai bien le retour que ça marche bien... mais impossible à afficher sur la page html.

Bref, je sèche...

Essaye de construire une fonction permettant de récupérer le résultat de la requète, actualise la progressbar, puis exécute la prochaine requète s'il reste des photos.