recharger une image après un timeout

[Balbuzard]

Bonjour;
Je dois recharger des images (qui peuvent éventuellement changer) sur une page de manière automatique et toutes les x secondes.
Je me suis tourné vers le javascript (que je ne connais absolument pas :-S) en essayant d'associer un changement d'images après un timeout.
J'ai essayé ce code intégré en haut de ma page:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
	function reload() {
		alert('oui');
		URL = "/xymon/gifs/clear-recent.gif";
		if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
		else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
		else alert('JavaScript : Your nagigator does not support XMLHttpRequest objects');
		xhr.open('GET',URL,true);
		xhr.onreadystatechange = ajaxReponse;
		xhr.send(null);
	}
 
	function ajaxResponse() {
	alert('non');
	if (xhr.readyState == 4) {
		document.getElementById("turn_clear",true).innerHTML=xhr.responseText;
		var timer=setTimeout("rafraichir()",5);
		alert('ouioui');
	}
}
</script>

et je rajoute un id pour les images (id="turn_clear".
Donc je suppose qu'au bout de 5 secondes, les images avec l'id turn_clear vont changer. Mais ce n'est pas le cas, et rien ne se passe :-S Même pas les alert!
Quelqu'un pourrait me donner un début de piste?
Merci!

[RomainVALERI]

Je n'ai pas regardé l'ensemble dans le détail mais :

...deux paramètres pour un getElementById ? !?

... 5 secondes ? le "5" en second param de setTimeout est en millisecondes

...et pour préciser aussi : tu dis qu'aucun alert n'est exécuté ? (si même le premier ne l'est pas c'est bizarre : montre-nous où est appelée ta fonction reload)

[Bovino]

Inutile de passer par AJAX pour recharger une image
Il suffit de réaffecter le src en ajoutant si besoin un timestamp en paramètre pour contourner le cache.

[NoSmoking]

il est préférable de suivre cet ordre

Code :

1
2
3
xhr.onreadystatechange = ajaxReponse;
xhr.open('GET',URL,true);
xhr.send(null);

[Balbuzard]

Bonjour;
Merci de vos réponses!
Pour RomainVALERI: J'appelle ma fonction reload n'importe où en fait :-S Voici ce que ça donne:

Code :

1
2
3
4
5
6
7
8
9
<script type="text/tavascript">
	alert();
	var link=document.getElementByID('clear');
	alert('link');
//	var src=link.getAttribute('src');
	var src = link.src;
	link.setAttribute('src','/xymon/gifs/clear-recent.gif');
</script>
<TR><TD>AFC</TD><TD><A HREF=/xymon/multisites/multisites.html><IMG SRC=/xymon/gifs/red-recent.gif WIDTH=16 HEIGHT=16 BORDER=0 ALT=red TITLE=red id=clear></A></TD>

Je pense que lorsque la fonction est appelée, elle attend le timeout, puis va chercher les éléments dont l'id est "clear" et ensuite charger l'image clear à la place?

J'ai modifié le code javascript tenant compte de tes remarques:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function rafraichir() {
		URL = "/xymon/gifs/clear-recent.gif";
		if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
		else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
		else alert('JavaScript : Your nagigator does not support XMLHttpRequest objects');
		xhr.open('GET',URL,true);
		xhr.onreadystatechange = ajaxReponse;
		xhr.send(null);
	}
 
	function ajaxReponse() {
	if (xhr.readyState == 4) {
		document.getElementById("clear").innerHTML=xhr.responseText;
		var timer=setTimeout("rafraichir()",5000);
	}

et je l'inclus dans ma page dans le header:

Code :

<script language="javascript" src="./reload.js"></script>

Merci pour vos réponses!

[RomainVALERI]

pas de PHP s'il te plait

[Balbuzard]

ooops désolé
J'ai édité mon message précédent

EDIT
Je trouve bizarre que dans le code source de la page, la fonction javascript s'affiche après l'affichage des images, alors que dans mon code c'est le contraire.
Je l'ai rajouté en bas de page (donc affichage dans le code source de la page tout à la fin) sans changement

Merci pour ta réponse!

[Bovino]

Déjà, tu devrais essayer d'être plus rigoureux au niveau de la syntaxe HTML : même si c'est parfois autorisé, il est fortement conseillé de mettre les valeurs des attributs entre quotes, ça évite toute erreur d'interprétation par le navigateur, en particulier pour les URL.

Ensuite, tu appelles une fonction qui fait ensuite référence à l'élément 'clear', mais au moment de l'appel de la fonction, l'élément clear n'existe pas dans la page.

Ceci dit, encore une fois, passer par AJAX est une mauvaise idée : cela ne te permettra pas d'éviter la récupération depuis le cache (donc pas d'actualisation) et c'est lourd pour quelquechose qui peut se faire plus facilement, par exemple (pas testé) :

Code html :

<img src="/xymon/gifs/red-recent.gif" onload="setTimeout(this.src = this.src.split('?')[0]+'?tt='+new Date().getTime()" />

[RomainVALERI]

Envoyé par Bovino

Inutile de passer par AJAX pour recharger une image
Il suffit de réaffecter le src en ajoutant si besoin un timestamp en paramètre pour contourner le cache.

Envoyé par Bovino

Ceci dit, encore une fois, passer par AJAX est une mauvaise idée : cela ne te permettra pas d'éviter la récupération depuis le cache (donc pas d'actualisation) et c'est lourd pour quelquechose qui peut se faire plus facilement

+2 avec la vache sacrée*

Ici il n'y a rien à calculer ou récupérer côté serveur, tout est déjà présent côté client, donc autant faire l'économie d'un appel au serveur ^^


* rhooô...

[Balbuzard]

Merci de vos réponses,

J'ai essayé ton code Bovino, voici:

Code :

<TD><FONT SIZE="+1" COLOR="#FFFFCC" FACE="Tahoma, Arial, Helvetica">AFC</FONT></TD><TD><CENTER><A HREF="/xymon/multisites/multisites.html"><IMG SRC="/xymon/gifs/red-recent.gif" ONLOAD="setTimeout(this.SRC=/xymon/gifs/green-recent.gif, 5000)" WIDTH="16" HEIGHT="16" BORDER="0" ALT="red" TITLE="red" id="clear"/></A></CENTER></TD>

Mais aucun rechargement.

Romain, en fait, les status peuvent changer, d'où par la suite un appel vers le serveur pour recharger le nouveau status (prochaine étape en fait).

[Bovino]

Code :

this.SRC

JavaScript est sensible à la casse, donc this.SRC != this.src et this.SRC n'existe pas.