Discussion :

[SpiderNéo]

Bonjour,

Je poste ce message parce que j'ai beau chercher un peu partout sur le net, je ne trouve pas de réponse à cette question.

J'ai un gros traitement qui est lancé à partir d'un appel ajax (via jQuery) et je voudrais afficher en temps réel des messages d'avancement (ou mette à jour un message d'une fenêtre modale par exemple) au fur et à mesure que le traitement avance.

Je sais qu'il est possible de forcer le navigateur a affiché quelque chose même si la page n'a pas fini de charger avec les fonctions flush() ou ob_flush().

J'ai d'ailleurs ce bout de code qui fonctionne bien lorsque je l'appelle avec mon navigateur mais pas lorsque je l’appelle en ajax :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
for ($i = 0; $i < 10; $i++)
{
  ob_start();
  ob_implicit_flush(true); 
 
  echo 'Traitement '.$i.' : terminé<br>';
 
  ob_end_flush();
  ob_flush();
 
  sleep(10);
 }

J'appelle ce code avec un appel de ce genre :

Code JavaScript :

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
 $.ajax({
  type: 'POST',
  url: 'test.php',
  cache: true,
  error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.responseText);
      alert(thrownError);
  },
  xhr: function (x) {
    console.log(x);
     var xhr = new window.XMLHttpRequest();
      //Download progress
      xhr.addEventListener("progress", function (evt) {
        console.log(evt);
        $('#message').append(evt.target.response);
 
      }, false);
      return xhr;
  },
  beforeSend: function () {
     console.log('beforeSend');
  },
  complete: function () {
      console.log('complete');
  },
  success: function (json) {
    console.log('fin');
  }
});

J'ai analysé le retour sur la console et en fait, je me rends compte que le message est concaténé :

1. Après le premier traitement j'ai : Traitement 1 : terminé<br>.
2. Après le deuxième traitement j'ai : Traitement 1 : terminé<br>Traitement 2 : terminé<br> au lieu d'avoir que Traitement 2 : terminé<br>.
3. Après le troisième traitement j'ai : Traitement 1 : terminé<br>Traitement 2 : terminé<br>Traitement 3 : terminé<br> au lieu d'avoir que Traitement 3 : terminé<br>.







Avez-vous une idée de comment faire ?

Je vous remercie par avance pour votre aide.

[Toufik83]

Bonjour,

Ce que tu cherches à faire est techniquement pas possible, si tu veux seulement avoir les détails de la progression de traitement, il faudrait utiliser l'option xhr d'ajax comme c'est montré dans le deuxième exemple ici.

Remarque : la progression ne fonctionnera pas sur un serveur local, sur un serveur distant en ligne oui.

[NoSmoking]

Bonjour,
attention à $('#message').append(evt.target.response) qui ajoute le message reçu mais n’enlève pas le contenu existant !

Voir : jQuery..append().

Au passage drôle de façon d'utiliser jQuery.ajax() en déclarant un objet window.XMLHttpRequest().

[Toufik83]

Bonjour,

Au passage drôle de façon d'utiliser jQuery.ajax() en déclarant un objet window.XMLHttpRequest().

Oui le lien que j'ai trouvé date de plus de 8ans, maintenant avec les versions récentes de jquery, on peut utiliser le xhr d'ajax var myXhr = $.ajaxSettings.xhr();

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
 
xhr: function () {  
    // Custom XMLHttpRequest
   var myXhr = $.ajaxSettings.xhr();
   if(myXhr.upload){
	myXhr.upload.addEventListener("progress",function(e){
	        console.log("loaded :"+e.loaded+", total :"+e.total);
	},false);
	//download
	myXhr.addEventListener("progress",function(e){
		console.log("loaded :"+e.loaded+" total :"+e.total);
	},false);
  }
return myXhr;
}

Puis je pense que j'ai répondu un peu vite quand j'ai dis que ce n'est pas possible techniquement, on peut procéder comme suite :

Code php :

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

1
2
3
4
5
6
7
8
9
 
if (ob_get_level() == 0) ob_start();
for ($i = 0; $i < 10; $i++){
	echo '<p>Traitement '.$i.' : terminé</p>';
	ob_flush();  
	flush();
	sleep(5);
}
ob_end_flush();

Et comme NoSmoking l'avait suggéré (bien vu, je n'ai pas vérifié le js...), il faudrait remplacer append par html :

Code :

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

1
2
 
$('#message').html(evt.target.response);