Discussion :

[YouplaBof]

Bonjour,

J'ai écrit une page html qui effectue des traitements en javascript qui durent plusieurs secondes (notamment des XMLHttpRequest synchrones).

Pour que l'utilisateur puisse suivre l'avancement du traitement j'affiche du texte dans un div avec innerHTML au fur et à mesure.

Problème : sous internet explorer 6 et 8 (pas essayé le 7) le texte n'est pas affiché au fur et à mesure du traitement, il est affiché d'un bloc à la fin, alors que sous firefox j'obtiens le résultat attendu.

Je suppose qu'il s'agit d'un problème de bufferisation mais je n'arrive pas à trouver une méthode pour forcer le navigateur à "flusher" en javascript.
Quelqu'un peut m'aider ?

Merci,
Youpla

[SpaceFrog]

tu récupères avec un ajax en une seule fois le contenu du innerHTML ?

[YouplaBof]

Merci pour ton attention. Je précise que je n'utilise pas de librairie AJAX, je fais tout à la main pour l'instant.

Alors du coté client, une boucle javascript "for i" qui invoque un php en mode synchrone.
Un premier div (progressiondiv) reçoit la valeur de i à chaque itération
Un second div (listdiv) reçoit la réponse du serveur et la concatène à son ancien contenu.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
for (var i=0; i<MonTableau.length; i++) {
  document.getElementById("progressiondiv").innerHTML=(i+1)+"/"+MonTableau.length+" in progress...";
  if(window.XMLHttpRequest) gen_request = new XMLHttpRequest();
  else
  if(window.ActiveXObject) gen_request = new ActiveXObject("Microsoft.XMLHTTP"); 
  // TODO : ELSE alert ("pasbon")
  gen_request.open("POST", "<?=$_SERVER['PHP_SELF']?>", false); 
  gen_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  gen_request.send("generation=&source_dir=<?=$toresize_repository?>&dest_dir=<?=$photos_repository?>&picturetogen="+MonTableau[i]);
  if(gen_request.readyState == 4) document.getElementById("listdiv").innerHTML += gen_request.responseText + "<br>";
}

Coté serveur (php) :
C'est un redimensionnement d'image, suivi d'un unique message

Code :

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

1
2
echo utf8_encode ("Création de ".$dest_file." ".$width."x".$height);
exit();

Et ceci à chaque itération.

[SpaceFrog]

heu ...

Code :

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

 if(window.ActiveXObject) gen_request = new ActiveXObject("Microsoft.XMLHTTP");

c'est pas ajax ça ???

mets un setTimeout incrémenté pour IE, mais pas sur que IE ne rafraichisse le contenu avant la fi, de ma boucle for ...

[YouplaBof]

heu ...

Code :

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

 if(window.ActiveXObject) gen_request = new ActiveXObject("Microsoft.XMLHTTP");

c'est pas ajax ça ???

Oui mais je n'utilise pas de librairie AJAX comme dojo ou openrico, je manipule l'objet XMLHttpRequest directement.

mets un setTimeout incrémenté pour IE, mais pas sur que IE ne rafraichisse le contenu avant la fi, de ma boucle for ...

Je n'ai pas compris, tu peux détailler ?

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
var delai=0 
 
for( ...
.../...
 if(gen_request.readyState == 4) { 
 delai+=1000;
setTimeout(function(){document.getElementById("listdiv").innerHTML += gen_request.responseText + "<br>"}, delai);
 
}