Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > jQuery
jQuery Forum d'entraide sur le framework jQuery. Avant de poster : Tutoriels jQuery, FAQ jQuery, Tous les tutoriels JavaScript, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 16/12/2011, 00h48   #1
Invité régulier
 
Inscription : octobre 2009
Messages : 16
Détails du profil
Informations forums :
Inscription : octobre 2009
Messages : 16
Points : 6
Points : 6
Par défaut Execution des instructions synchrone ?

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 :
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;
		});
 
 
	    });
charade est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 16/12/2011, 07h57   #2
Membre éclairé
 
Avatar de hariman
 
Homme Luc Hariman RANDRIANOMENJANAHARY
Développeur Java
Inscription : janvier 2008
Messages : 175
Détails du profil
Informations personnelles :
Nom : Homme Luc Hariman RANDRIANOMENJANAHARY
Localisation : Ile Maurice

Informations professionnelles :
Activité : Développeur Java
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : janvier 2008
Messages : 175
Points : 349
Points : 349
Envoyer un message via MSN à hariman Envoyer un message via Skype™ à 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
hariman est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 16/12/2011, 10h37   #3
Invité régulier
 
Inscription : octobre 2009
Messages : 16
Détails du profil
Informations forums :
Inscription : octobre 2009
Messages : 16
Points : 6
Points : 6
Citation:
Envoyé par hariman Voir le message
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
charade est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 16/12/2011, 11h48   #4
Membre éclairé
 
Avatar de hariman
 
Homme Luc Hariman RANDRIANOMENJANAHARY
Développeur Java
Inscription : janvier 2008
Messages : 175
Détails du profil
Informations personnelles :
Nom : Homme Luc Hariman RANDRIANOMENJANAHARY
Localisation : Ile Maurice

Informations professionnelles :
Activité : Développeur Java
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : janvier 2008
Messages : 175
Points : 349
Points : 349
Envoyer un message via MSN à hariman Envoyer un message via Skype™ à 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.
hariman est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 16/12/2011, 12h01   #5
Invité régulier
 
Inscription : octobre 2009
Messages : 16
Détails du profil
Informations forums :
Inscription : octobre 2009
Messages : 16
Points : 6
Points : 6
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...

Citation:
Envoyé par hariman Voir le message
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 est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 01h40.


 
 
 
 
Partenaires

Hébergement Web