Discussion :

[jux]

Bonjour,

Avec un $.each je boucle sur un tableau JS et mets à jour une barre de progression :
HTML :

Code html :

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

1
2
3
<div class="progress progress-striped progress-success active" id="progress_bar">
    <div class="bar" id="bar"></div>
</div>

JS :

Code :

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

1
2
3
4
5
6
7
var nb = myArray.length;
$.each(myArray, function( index, value ) {
        status=appelAjax(value);
        //...
	$( "#bar" ).width(getValueProgressBar(nb, index+1)+'%');
        //getValueProgressBar renvoie le pourcentage
});

Ce code fonctionne bien sur Firefox mais sur Chrome la barre de progression ne change pas.
Quand je mets par exemple un $( "#bar" ).width('56%'); avant ou après le each la barre de progression fonctionne bien sous Chrome.
Le each bloque la mise à jour du dom.
Des recherches google m'ont montré qu'on peut utiliser load :

Code :

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

1
2
$("").load(function() {
});

Mais je ne vois pas comment l'utiliser, je suis bien bloqué
Merci pour votre aide

[danielhagnoul]

Bonsoir

Avec des bouts de code impossible de tester un problème.

Si appelAjax() effectue une transaction AJAX il y a un problème, car AJAX est asynchrone !

La valeur de status (var ?) ne sera pas connue avant l'exécution du reste du code de $.each().

[jux]

Bonjour, j'ai désactivé l'asynchrone, la fonction appelAjax est faite comme ça :

JS :

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
 
function appelAjax (value){
	var status=null;
	  $.ajax({
		    url: baseUrl+'/ajax/analyse',
		    type: 'POST',
		    data:{
	    		'value'  : value
		    },
		    async: false,
		    beforeSend: function(){
		        //...
		    },
		    success: function(result){
		    	//...
		    },	
		    error: function(result){
		       //...
			},
			complete : function(result) {
				status = result.status;
			}
		});	
	  return status;
}

Dans le $.each quand je commente la fonction, la barre de progression n'est toujours pas mise à jour.
Mon code est assez volumineux je mets que ce qui pose pb. Mes variables sont bien instanciées dans l'appelant.

Tout fonctionne bien avec Firefox je n'ai pas de messages d'erreur mais avec Chrome le comportement est différent, il attend que le each soit terminé pour afficher quelque chose, même les console.log
Un truc bizarre, quand je mets un alert('OK') dans le each il n'y aucune pop up de message mais on peut voir le dom se mettre à jour...

[jux]

Avec chrome on ne voit pas la progression, la barre passe directement à 100% dès que le traitement est terminé.

[danielhagnoul]

Utiliser un each() pour faire avancer une barre de progression ce n'est pas commun, comme il n'y a pas de pause entre les calculs on peut comprendre que le JS termine son travail avant d'afficher le résultat.

Exemple avec http://jqueryui.com/progressbar/

Code HTML :

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

<div id="progressbar"></div>

Code JS :

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
$( function(){
 
    var i = 0;
 
    function go(){
        setTimeout( function(){
            $( "#progressbar" ).progressbar({
                "value" : i
            });
 
             if ( i < 100 ){
                 i++;
                 go();
             }
        }, 200 );
    }
 
    go();
 
});

[jux]

Merci danielhagnoul

La barre de progression se met bien à jour maintenant avec Chrome.

J'ai descendu la valeur du setTimeout à 10ms ça fonctionne bien.