[AJAX] Compteur temps réel ne ce met pas à jour sous IE

**Pablo PiKassiette** · 09/01/2010, 18h42

Salut!

Je me casse la tête sur un compteur de clique qui fonctionne très bien sous firefox:
http://pablopikassiette.free.fr/testcompteur/
Mais pas sous IE.

Normalement le contenu du compteur dois ce rafraîchir toute les 10s, sous firefox ça marche mais pas sous IE.

Je vous livre le code que j'utilise:

index.php

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
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Compteur en temps réel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript" src="fonctions/js/compteur.js"></script> <!-- A inserer si vous voulez afficher le compteur -->
 
<style type="text/css">
<!--
@import url("style/style.css");
-->
</style>
 
</head>
 
<body>
 
 
 
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#" onClick="cliquage();">clique</a></p>
</body>
</html>

style.css

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
form {
margin:0px;
}
#compteur {
	width:100px; /* Largeur du cadre compteur */
	position:absolute; /*Cadre du compteur en postion absolute (on peut le placer partout) */
	top:5px; /*Position Y du cadre compteur */
	left:5px; /*Position X du cadre compteur */
}
 
#compteur input{
	width:100%; /* Largeur du compteur */
	text-align:center; /*Texte aligner au milieu */
	font-weight:bold;
}

compteur.php

Code :

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

1
2
3
4
5
6
$Fichier = fopen("../../buffer/compteur.txt","r+"); // on ouvre le fichier en lecture/écriture
$NbVisites = fgets($Fichier,4096);              // on récupère le nombre dans le fichier
$NbVisites++;                                 // on incrémente le nombre de visites de + 1
fseek($Fichier,0);                            // on se place en début de fichier
fputs($Fichier,$NbVisites);                   // on écrit dans le fichier lenombre incrémenté
fclose($Fichier);                             // on ferme le fichier

compteur.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
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
///////////////////////////////////////////////////
//COMPTEUR PLUS Par Mathis_mathis(at)hotmail.com //
///////////////////////////////////////////////////
 
////////////////////////////////////////////////////
//TEST NAVIGATEUR+ INITIALISATION DU COMPTEUR
//Vérifie si le navigateur est compatible
///////////////////////////////////////////////////
 
var compt_object = null; //On déclare l'objet 'compt_object'
 
// SI LE NAVIGATEUR EST FIREFOX  //
 if(window.XMLHttpRequest) 
 {
 compt_object = new XMLHttpRequest();  //Nom de l'objet pour Firefox : XMLHttpRequest()
 document.write("<div id=\"compteur\"><form name=\"form\"><input name=\"compt\" type=\"text\" id=\"compt\" readonly=\"readonly\"></form></div>") ; //On écris le compteur
 Requete() //On lance la fonction Requete()
 }
 
// SI LE NAVIGATEUR EST INTERNET EXPLORER //
 else if(window.ActiveXObject) 
 {
 compt_object = new ActiveXObject("Microsoft.XMLHTTP");   //Nom de l'objet pour Ie : ActiveXObject("Microsoft.XMLHTTP")
 document.write("<div id=\"compteur\"><form name=\"form\"><input name=\"compt\" type=\"text\" id=\"compt\" readonly=\"readonly\"></form></div>") ; //On écris le compteur
 Requete() //On lance la fonction Requete()
 }
 
////////////////////////////////////////////////////
//REQUETE()
//Cherche la valeur de compteur.txt
///////////////////////////////////////////////////
 
function Requete()  
{  
compt_object.open("GET", "buffer/compteur.txt", true); //On ouvre le fichier par la méthode GET en asynchrone (le navigateur ne se fige pas)      
compt_object.onreadystatechange = 
	function() 
	{ 
		if(compt_object.readyState == 4)  // Des que les données sont complètement accessibles (code 4)
		{
		document.form.compt.value=compt_object.responseText+' visites'; //On affiche la valeur dans le bloc Compteur
		}
	}      
compt_object.send(null); //On execute la requete
setTimeout("Requete()",10000);  //On reexecute Requete() toutes les secondes
}
 
function cliquage()
{
	var xhr_object = null;
	   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
	  else
	    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
 
	// On ouvre la requete vers la page désirée
	xhr_object.open("GET", "fonctions/php/compteur.php", true);
 
	// dans le cas du get
	xhr_object.send(null);
}

**hornetbzz** · 14/01/2010, 09h16

Salut,

D'abord, tu pompes un code qui date de 2005. Or il se trouve que l'on a observé qq évolutions heureuses depuis. Mais je ne pense pas que cela soit la cause ici.

Ensuite il te manque un ";" dans 2 lignes de code identiques :

Requete() ; //On lance la fonction Requete()

Ensuite, c'est juste une hypothèse, valable uniquement si tu as vérifié point par point que le code fonctionne: est-ce que IE ne mettrait pas ta page en cache par hasard..?

Auquel cas tu pourrais tenter une modif des headers en ajoutant (dans le cas de IE) :

header("Refresh: 3; URL=/index.php")

**Pablo PiKassiette** · 15/01/2010, 16h37

Salut et merci pour ton aide.

Par curiosité tu pourrai me dire quels sont les évolutions dont tu parles.

Sinon j'ai fais les modifs avec les ; oublié mais ça ne change rien, et si je rajoute header("Refresh: 3; URL=/index.php"), ça me mets

Warning: Cannot modify header information - headers already sent by (output started at /mnt/145/sdb/9/7/pablopikassiette/testcompteur/index.php:7) in /mnt/145/sdb/9/7/pablopikassiette/testcompteur/index.php on line 7

**hornetbzz** · 16/01/2010, 04h13

Salut ,

Visiblement, je n'ai pas été assez précis car je voulais te donner une indication, pas faire le boulot à ta place :

De la description que tu en fais, je crois que tu as un problème de cache sous IE.

Donc il faut que tu forces IE à rafraichir la page et ne pas mettre en cache les résultats (mais les afficher à chaque refresh).

Donc une piste est de modifier des entêtes (headers) mais pas a posteriori par une commande "header("...") : comme tu as déjà envoyé les entêtes, c'est normal que tu subisses un msg d'erreur. Il faut que tu intègres une balise <meta> d'emblée dans l'envoi de tes entêtes HTTP (par ton serveur au navigateur client) :

index.php

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="REFRESH" CONTENT="5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Compteur en temps réel</title>
<script type="text/javascript" src="fonctions/js/compteur.js"></script> <!-- A inserer si vous voulez afficher le compteur -->
 
<style type="text/css">
<!--
@import url("style/style.css");
-->
</style>
 
</head>

Je pense que ça devrait être suffisant pour IE mais pas sûr, car je ne suis pas un spécialiste de la gestion du cache. En complément, regardes ici.

[EDIT]: je me rends compte a posteriori que tu n'as même pas lu les commentaires associés au source que tu as pompé : ce problème a visiblement été contourné/résolu par un des lecteurs. ça mérite un

**Pablo PiKassiette** · 19/01/2010, 10h39

Putain quel boulet, j'avais même pas lu jusqu'au bout en fait, les commentaires…
Merci à toi et désolé

[AJAX] Compteur temps réel ne ce met pas à jour sous IE

AJAX

Vue hybride

Discussions similaires

Partager

Partager