Rafraichir une partie de la page toutes les secondes [Résolu]

identifiant_bidon · 13/03/2011, 00h57

Bonjour,

Voici mon problème.
Je dispose d'une page avec une table dans laquelle j'affiche un nombre aléatoire. Je voudrais faire en sorte que la cellule dans laquelle est affiché ce nombre se recharge toutes les secondes. Ne connaissant pas Ajax pour le moment, je ne sais pas du tout comment faire ça.

Voici mon code pour l'instant:

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
<html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/Test/test_Ajax/test.php";
		function rafraichir() {
				if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
				else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
				else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
				xhr.open('GET',URL,true);
				xhr.onreadystatechange = ajaxReponse;
				xhr.send(null);
		}
 
		function ajaxReponse() {
				if (xhr.readyState == 4) {
						document.getElementById("test_refresh",true).innerHTML=xhr.responseText; 
						var timer=setTimeout("rafraichir()",1000); 
				}
		}
</script>
 
 
 
</head>
<body onLoad="javascript:rafraichir();">
<table>
	<tr>
		<td id="test_refresh">
			<?php 
			$nb_min = 1;
			$nb_max = 100;
			$nombre = mt_rand($nb_min,$nb_max);
 
			echo $nombre;
			?>
		</td>
	</tr>
</table>			
</body>
</html>

Merci à toute personne qui pourra m'indiquer comment régler mon problème.

A+

Nesmontou · 13/03/2011, 11h27

Bonjour,

Tu peux utiliser la fonction setInterval : http://javascript.developpez.com/faq...e=date#Horloge

Bon développement

identifiant_bidon · 13/03/2011, 12h04

Yeeees, merci beaucoup Nesmontou !!

Ça marche bien comme je veux !!!!
(et dire que mon problème se trouvait seulement là !!!

)

identifiant_bidon · 13/03/2011, 17h23

J'crois que j'ai parlé un peu trop vite en fait. Le comportement est vraiment bizarre au bout de quelques secondes. Une partie de la page est "doublée".

Cette page est une page de test (je découvre Ajax) mais lorsque je la met dans ma "vraie" page, le rafraichissement ne se fait plus.

Voici mon code, si quelqu'un pouvait m'expliquer ce qui se passe, ce serait sympa.

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
<html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/Test/test_Ajax/test.php";
		function rafraichir() {
				if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
				else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
				else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
				xhr.open('GET',URL,true);
				xhr.onreadystatechange = ajaxReponse;
				xhr.send(null);
		}
 
		function ajaxReponse() {
				if (xhr.readyState == 4) {
						document.getElementById("test_refresh",true).innerHTML=xhr.responseText; 
 
 
 
 
						var timer=setInterval("rafraichir()",1000); 
				}
		}
</script>
</head>
<body onLoad="javascript:rafraichir();">
<table>
	<tr>
		<td id="test_refresh">
			<?php 
			$nb_min = 1;
			$nb_max = 100;
			$nombre = mt_rand($nb_min,$nb_max);
 
			echo $nombre;
			?>
		</td>
	</tr>
</table>	
ceci est une première phrase<br/>ceci est une seconde phrase
<div style="position:absolute; top:100px; left:200px; height:100px; width:200px; border:1px solid #000000">
div test
</div>
</body>
</html>

Merci beaucoup

Bovino · 14/03/2011, 12h08

Code :

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

document.getElementById("test_refresh",true)

c'est quoi ce paramètre true ?

identifiant_bidon · 14/03/2011, 14h25

Ben je t'avouerai que je sais pas trop Bovino. C'est un code que j'ai récupéré à la base sur le net. C'est peut-être ça qui fait que cela fait n'importe quoi. Je vais essayer ce soir.

Merci

andry.aime · 14/03/2011, 16h25

Bonsoir,

+1 Bovino
Utilise un setTimeout à la place de setInterval. Fait un recherche, il y a plusieurs discussion résolue

.

A+.

identifiant_bidon · 15/03/2011, 06h29

Bonjour à tous

D'abord merci pour vos conseils. Je procède par petites touches. Voici ce que donne mon code. J'ai viré le true, et remplacé setInterval par setTimeout. Ca marche pas mal.

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
<html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/Test/test_Ajax/test.php";
		function rafraichir() {
				if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
				else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
				else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
				xhr.open('GET',URL,true);
				xhr.onreadystatechange = ajaxReponse;
				xhr.send(null);
		}
 
		function ajaxReponse() {
				if (xhr.readyState == 4) {
						document.getElementById("test_refresh").innerHTML=xhr.responseText; 
 
 
 
 
						var timer=setTimeout("rafraichir()",1000); 
				}
		}
</script>
</head>
<body onLoad="javascript:rafraichir();">
<table>
	<tr>
		<td id="test_refresh">
			<?php 
			$nb_min = 1;
			$nb_max = 100;
			$nombre = mt_rand($nb_min,$nb_max);
 
			echo $nombre;
			?>
		</td>
	</tr>
</table>	
ceci est une première phrase<br/>ceci est une seconde phrase
<div style="position:absolute; top:100px; left:200px; height:100px; width:200px; border:1px solid #000000">
div test
</div>
</body>
</html>

Maintenant, j'ai 2 questions :
- Pourquoi le texte "ceci est une première phrase / ceci est une seconde phrase" est il affiché 2 fois ??
- La rafraichissement de ma cellule ne marche pas sous IE. Pourquoi ??

Aime, j'ai déjà cherché mais j'ai pas trouvé. Peut être mal cherché...

andry.aime · 18/03/2011, 18h22

Bonsoir,
Déclare xhr en variable globale ou passe le en paramètre de la fonction ajaxReponse().

A+.

identifiant_bidon · 19/03/2011, 19h03

Merci Aimé pour ta réponse.
Est-ce que tu peux juste m'expliquer le but de cette manip' ?

Merci

Billy KiT · 19/03/2011, 21h23

Salut,
Le fait de ne pas mettre le mot clef var rend xhr global. Donc ça fonctionne.
Le soucis sur IE est certainement dû au fait qu'il charge les pages depuis le cache et donc que le chiffre ne change pas.
Pour éviter ça, il faut ajouter une astuce "anti-cache" :

Code :

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

xhr.open('GET',URL+"?anticache="+new Date().getTime(),true);

Pour les phrases en double, qu'y a-t-il dans test.php ? Il suffit qu'il y ait :

Code :

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

1
2
3
4
5
6
7
<?php 
	$nb_min = 1;
	$nb_max = 100;
	$nombre = mt_rand($nb_min,$nb_max);
 
	echo $nombre;
?>

identifiant_bidon · 19/03/2011, 21h41

Aaaah super merci Billy KiT. Je vais regarder ce que ta solution donne.

Alors par contre, je suis complètement novice avec Ajax, je dois dire. Ma page test.php, c'est la page dont j'ai fourni le code (oui, tout ça. Du coup, je vois mieux d'ou vient mon erreur).

J'ai l'impression que j'ai fait une petite bêtise alors...

Du coup, pour que les choses soient vraiment claires dans mon esprit, que dois-je mettre dans ma variable URL ?

Merci encore

Billy KiT · 19/03/2011, 22h02

Je crois que tu as brûlé beaucoup d'étapes !

C'est pas très bon.
Si ta page s'appelle test.php, tu dois créer un autre fichier test2.php qui contient seulement le code comme noté dans le précédent message.
Donc : URL = "test2.php" si dans le même répertoire.
Il faut quand même absolument revoir les principes fondamentaux de AJAX avec les tutos

.

identifiant_bidon · 20/03/2011, 08h18

Merci beaucoup Billy KiT. Tout marche nickel !!

Je m'en vais de ce pas lire quelques tutos ...

13/03/2011, 11h27	#2
Nesmontou Modérateur Benjamin PREVOT Architecte de système d'information Inscription : septembre 2004 Messages : 1 568 Détails du profil Informations personnelles : Nom : Benjamin PREVOT Âge : 30 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Architecte de système d'information Secteur : Finance Informations forums : Inscription : septembre 2004 Messages : 1 568 Points : 2 493 Points : 2 493	Bonjour, Tu peux utiliser la fonction setInterval : http://javascript.developpez.com/faq...e=date#Horloge Bon développement __________________ Si vous ne pouvez expliquer un concept à un enfant de six ans, c'est que vous ne le comprenez pas complètement. Albert EINSTEIN F.A.Q. : Java, PHP, (X)HTML / CSS N'oubliez pas de cliquer sur le bouton Résolu en bas de page quand vous avez obtenu une solution à votre problème
	00

13/03/2011, 12h04	#3
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Yeeees, merci beaucoup Nesmontou !! Ça marche bien comme je veux !!!! (et dire que mon problème se trouvait seulement là !!! ) __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

14/03/2011, 12h08	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById("test_refresh",true) c'est quoi ce paramètre true ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

14/03/2011, 14h25	#6
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Ben je t'avouerai que je sais pas trop Bovino. C'est un code que j'ai récupéré à la base sur le net. C'est peut-être ça qui fait que cela fait n'importe quoi. Je vais essayer ce soir. Merci __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

19/03/2011, 19h03	#10
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Merci Aimé pour ta réponse. Est-ce que tu peux juste m'expliquer le but de cette manip' ? Merci __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

14/03/2011, 16h25	#7
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 126 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 126 Points : 7 270 Points : 7 270	Bonsoir, +1 Bovino Utilise un setTimeout à la place de setInterval. Fait un recherche, il y a plusieurs discussion résolue . A+.
	00

18/03/2011, 18h22	#9
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 126 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 126 Points : 7 270 Points : 7 270	Bonsoir, Déclare xhr en variable globale ou passe le en paramètre de la fonction ajaxReponse(). A+.
	00

19/03/2011, 21h41	#12
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Aaaah super merci Billy KiT. Je vais regarder ce que ta solution donne. Alors par contre, je suis complètement novice avec Ajax, je dois dire. Ma page test.php, c'est la page dont j'ai fourni le code (oui, tout ça. Du coup, je vois mieux d'ou vient mon erreur). J'ai l'impression que j'ai fait une petite bêtise alors... Du coup, pour que les choses soient vraiment claires dans mon esprit, que dois-je mettre dans ma variable URL ? Merci encore __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

19/03/2011, 22h02	#13
Billy KiT Membre du Club Inscription : mars 2011 Messages : 47 Détails du profil Informations forums : Inscription : mars 2011 Messages : 47 Points : 59 Points : 59	Je crois que tu as brûlé beaucoup d'étapes ! C'est pas très bon. Si ta page s'appelle test.php, tu dois créer un autre fichier test2.php qui contient seulement le code comme noté dans le précédent message. Donc : URL = "test2.php" si dans le même répertoire. Il faut quand même absolument revoir les principes fondamentaux de AJAX avec les tutos .
	00

20/03/2011, 08h18	#14
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Merci beaucoup Billy KiT. Tout marche nickel !! Je m'en vais de ce pas lire quelques tutos ... __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email