Ne rafraîchir que les images

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour à toutes et à tous,

Dans ce code HTML créé dynamiquement, la page se rafraîchit toutes les 10s.

Est t'il possible de ne rafraîchir que les images ?

Voici le code :

Code:

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
 
u:='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">'#10#13+
       #10#13+
      '<html>'#10#13+
      '<head>'#10#13+
      '<title>SURVEILLANCE</title>'#10#13+
 
//***********mise à jour du taux de rafraichissement**********************
 
      '<META http-equiv="Refresh" content="'+inttostr(Ed_refresh.Value)+'">'#10#13+
 
'</head>'#10#13+
'<BODY ms_positioning="gridlayout" leftMargin=0 bgcolor="#000080" >'#10#13+
'<FORM NAME="mail" METHOD=GET ACTION="/cgi-bin/mailer">&nbsp;&nbsp;&nbsp;&nbsp;<INPUT NAME="RESTE" SIZE=5 MAXLENGTH=5 style="color: #00FF00; border-style: outset; border-width: 1; background-color: #000000">'#10#13+
'</FORM>'#10#13+
'<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE</FONT>&nbsp;</i></b></font>'#10#13+
'&nbsp;</p>'#10#13;
      if alarme then
      begin
        t1:=60;
	      u:=u+'<p align="center"><font face="Arial Narrow" size="6" color="#FF0000">ALERTE !</font>'#10#13+
	      '</p>'#10#13;
      end else t1:=0;
      u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	    'style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: '+inttostr(100+t1)+'px; HEIGHT: 211px"'#10#13+
      'height="35" alt="Cam 1" src="Image1" width="27" border="4">'#10#13;
      if NbCamera>1 then
      begin
	      u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	      'style="Z-INDEX: 101; LEFT: 319px; WIDTH: 259px; POSITION: absolute; TOP: '+inttostr(100+t1)+'px; HEIGHT: 211px"'#10#13+
	      'height="35" alt="Cam 2" src="Image2" width="27" border="4">'#10#13;
      end;
      if NbCamera>2 then
      begin
        if NbCamera=4 then u1:= 40 else u1:= 180;
	      u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	      'style="Z-INDEX: 101; LEFT: '+inttostr(u1)+'; WIDTH: 259px; POSITION: absolute; TOP: '+inttostr(330+t1)+'px; HEIGHT: 211px"'#10#13+
	      'height="35" alt="Cam 3" src="Image3" width="27" border="4">'#10#13;
      end;
      if NbCamera=4 then
      begin
	    u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	      'style="Z-INDEX: 101; LEFT: 319px; WIDTH: 259px; POSITION: absolute; TOP: 260px; HEIGHT: '+inttostr(330+t1)+'px"'#10#13+
	      'height="35" alt="Cam 4" src="Image4" width="27" border="4">'#10#13;
      end;
      u:=u+'</body>'#10#13+
      '</html>

Si il y a une possibilité, merci de me venir en aide.

@+,

Cincap

Code:

1
2
3
4
5
var TabImages=document.images;
IL=TabImages.length
for (i=0;i<IL;i++){
TabImages[i].src=TabImages[i].split('?')[0]+new date()
}

19/03/2008, 12h10
cincap

Très rapide !
@ SpaceFrog, j'étais en train de lire tes réponses à ce sujet pour d'autres questions sur le forum.

Ma page est générée en Delphi et je ne vois pas ou insérer ta proposition.

Je suppose que c'est dans la partie Html mais ou, si oui, je dois alors enlever :
Code:

1 2 '<META http-equiv="Refresh" content="'+inttostr(Ed_refresh.Value)+'">'#10#13+
Sinon il y aurait conflit.

Merci,

@+,

Cincap
19/03/2008, 13h14
SpaceFrog

ce script serait à mettre entre des balses script dans une fonction lancée dasn un setInterval ...
19/03/2008, 14h00
cincap

Bon je vais essayer !

Merci à tous,

@+,

Cincap
19/03/2008, 14h44
SpaceFrog

heu oui il faut enlever la balise meta refresh ....

Pas de solution !

Bonsoir à toutes et à tous,

Je n'ai pas sut adapter le code de SpaceFrog au code de mon 1er topic.
Code:

1 2 3 4 5 6 7 8 9 10 11 '<script type="text/javascript">'#10#13+ 'function Launch()'#10#13+ '{var TabImages=document.images'#10#13+ 'IL=TabImages.length'#10#13+ 'for (i=0;i<IL;i++){'#10#13+ 'TabImages[i].src=TabImages[i].split('?')[0]+new date()'#10#13+ '}'#10#13+ '</script>'#10#13+ <body onload="Launch()" >
Après plusieurs essais, je conserve par conséquent le refresh de toute la page.

Merci à tous,

@+,

Cincap

20/03/2008, 08h48
SpaceFrog

Tu as juste oublié le setInterval

Code:

<body onload="setInterval(Launch(),5000)" >

[edit] Désolé pour l'oubli de la parethèse fermante [édit] :oops::oops:
20/03/2008, 10h41
cincap

Décidément tu es le seul à répondre
Bonjour à toutes et à tous,

@ SpaceFrog, merci à toi pour tes précieux conseils.

Je note bien mon erreur, mais comme ce code Html est créé dynamiquement, ce n'est pas facile d'autant que le refresh est conditionné par ce code qui est relatif au composant sur ma fiche Delphi.
Code:

1 2 3 inttostr(Ed_refresh.Value)
Je vais tester !

@+,

Cincap

Test

Voila,

Une fois le code utilisé, IE7 m'affiche "il existe des erreurs"

Voici le code Htm :

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{
 
var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
TabImages[i].src=TabImages[i].split("?")[0]+new date()
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(Launch(),5000" ms_positioning="gridlayout" leftMargin=0>
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>VIDEO SURVEILLANCE</FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Pas évident !

@+,

Cincap

20/03/2008, 11h02
SpaceFrog
ta balise image est un peu curieuse ...
Code:

1 2 <img style="z-index: 101; left: 40px; width: 259px; position: absolute; top: 100px; height: 211px;border: solid 4px;" alt="Caméra 1" src="Image1" />
il manque surtout la parenthèse fermante de setInterval

Code:

onload="setInterval(Launch(),5000)"

et si ça ne marche pas essye

Code:

onload="setInterval(fcuntion(){Launch()},5000)"

il y a déjà un mieux

1ère solution = erreur

2ième solution = ok au démarrage de la page puis erreur après 5000 (compteur)

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
TabImages[i].src=TabImages[i].split('?')[0]+new date()
 
}
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(function(){Launch()},5000)" ms_positioning="gridlayout" leftMargin=0">
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE</FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Sinon c'est vrai que c'est un peu particulier de programmer cette page, car pour indiquer ceci dans mon programme split('?') je dois écrire split(' '?' ').

Le compteur à l'air de fonctionner cette fois. :lol:

@+

Code:

1
2
3
4
5
6
7
for (i=0;i<IL;i++){
 if(TabImages[i].src.indexOf('?')>-1){
                 TabImages[i].src=TabImages[i].split('?')[0]+new Date()
                  }
  else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 
}

arf Date et pas date ...

Il existe des erreurs

Code:

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
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
if(TabImages[i].src.indexOf('?')>-1){
 
TabImages[i].src=TabImages[i].split('?')[0]+new Date()
 
}
 
else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(function(){Launch()},5000)"  ms_positioning="gridlayout" leftMargin=0>
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE </FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Pourtant, le code à l'air correct, à n'y rien comprendre

il manque la balsie de fermeture de la focntion:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
		if(TabImages[i].src.indexOf('?')>-1){
 			TabImages[i].src=TabImages[i].split('?')[0]+new Date()
 			}
 
		else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 }
 }
</script>

Tu as raison, après test

1) pas d'erreur à l'éxécution,
2) après 5000, refresh uniquement de l'image, c'est super
3) après 5000, Erreur.

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
if(TabImages[i].src.indexOf('?')>-1){
 
TabImages[i].src=TabImages[i].split('?')[0]+new Date()
 
}
 
else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 
}
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(function(){Launch()},5000)"  ms_positioning="gridlayout" leftMargin=0>
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE</FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Au fait le temps de 5000 peut t'il être remplacé par :

Code:

1
2
 
inttostr(Ed_refresh.Value)

Merci de ta patience,

@+,

Cincap

pffff je suis trop préssé d'aler en week end ...
encore une erreur d'innatention de ma part ... desole ...
j'ai oublié un .src
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> function Launch() {var TabImages=document.images IL=TabImages.length for (i=0;i<IL;i++){ if(TabImages[i].src.indexOf('?')>-1){ TabImages[i].src=TabImages[i].src.split('?')[0]+new Date() } else { TabImages[i].src= TabImages[i].src+'?'+new Date() } } } </script>
pour ce qui est de remplace 5000 par inttostr(Ed_refresh.Value)

il vient d'ou ton inttostr(Ed_refresh.Value) ?

20/03/2008, 13h34
cincap

Déjà merci pour t'occuper de moi.

Comme ce code Htm est généré en Delphi, sur ma fiche se trouve un timer réglé à 10s et un TSpinedit (composant) qui se nomme "Ed_refresh.Value" qui permet de choisir de 1s à 30s.

C'est ce temps de 10s qui était utilisé pour le refresh de la page.

Ce serait une bonne chôse de l'adapter au new code pour ne pas imposer le temps unique de 5s.

Je viens d'essayer ta proposition, et au démarrage c'est ok puis après 5s, c'est ok puis après 5s, je n'ai plus l'image.

Pas évident, avant de poster j'avais déjà pas mal galéré.

Seul le refresh de toute la page fonctionnait correctement.

Ne te casse pas trop la tête avant ton week-end.

@+,

Cincap
20/03/2008, 13h36
SpaceFrog

heu faut virer le refresh ...
20/03/2008, 13h39
cincap

Il était viré ! c'était pour te donner la configuration relatée dans mon 1er topic8-)

Voir 40 message(s) de cette discussion en une page