Garder en memoire l'etat d'une fonction Javascript [Résolu]

voyageurdumonde · 21/08/2011, 07h01

Bonjour,

J'utilise la fonction javascript ci-dessous pour afficher/masquer une DIV.

J'aimerais (je ne sais pas si cela est possible?) qu'apres un reload ( envoi d'un formulaire par exemple) les DIV gardent en memoire leurs etat avant le reload:afficher ou cache.

Merci de votre aide

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
<script>
function visibilite(Id)
{
 //var i;
 var targetElement;
 targetElement = document.getElementById("divid" + Id) ;
 var IMG;
    IMG = document.getElementById(Id) ;
 if ( targetElement.style.display == "none") 
      {targetElement.style.display = "" ;
      IMG.src="detail1.png";}
 else
     {targetElement.style.display = "none" ;
     IMG.src="detail.png";}
}
 
</script>
 
<img src="detail.png" name=IMG58 id=58 onclick="visibilite(this.id)">
<div id=divid58 style="display:none;" ></DIV>

Auteur · 21/08/2011, 15h24

bonjour,

il y a deux possibilités :
- la première sont les cookies : tu enregistres l'état de tes div dans un cookie. Lorsque tu recharges la page tu vas y lire les informations. Si le cookie n'existe pas tu appliques la mise en page par défaut.

- la seconde serait d'envoyer l'état de tes div au serveur (ajax). Au moment de la génération de la page tu vas lire les paramètres à appliquer sur chaque div.

Willpower · 21/08/2011, 16h21

Citation:

Envoyé par Auteur

- la seconde serait d'envoyer l'état de tes div au serveur (ajax). Au moment de la génération de la page tu vas lire les paramètres à appliquer sur chaque div.

Ca dépend ce qu'il veut faire exactement, s'il ne veut le conserver que lors d'un reload causé par un formulaire par exemple. Il peut simplement sauver des données via des GET/POST et les rétablir en php.

Il existe les variables de session, tout dépend de l'usage.

Mais le plus simple selon moi est de te servir des cookies comme l'a suggéré Auteur.

Eric2a · 21/08/2011, 16h37

Salut,

Pareil pour les cookies...

Code html :

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
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript">//<![CDATA[
		// Gestion des cookies
		function createCookie(name,value,days) {
			if (days) {
				var date = new Date();
				date.setTime(date.getTime()+(days*24*60*60*1000));
				var expires = "; expires="+date.toGMTString();
			}
			else var expires = "";
			document.cookie = name+"="+value+expires+"; path=/";
		}
		function readCookie(name) {
			var nameEQ = name + "=";
			var ca = document.cookie.split(';');
			for(var i=0;i < ca.length;i++) {
				var c = ca[i];
				while (c.charAt(0)==' ') c = c.substring(1,c.length);
				if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
			}
			return null;
		}
		function eraseCookie(name) {
			createCookie(name,"",-1);
		}
 
		// Affiche/Cache l'élement HTML ; Créé/Supprime le cookie correspondant
		function visibilite(Id){
			var
				eltId="divid"+Id,
				targetElement=document.getElementById(eltId),
				IMG=document.getElementById(Id);
 
			if(targetElement.style.display=="none"){
				targetElement.style.display="";
				IMG.src="detail1.png";
				createCookie(Id,"opened");
			}else{
				targetElement.style.display="none";
				IMG.src="detail.png";
				eraseCookie(Id);
			}
		}
 
		// Initialisation une fois le document chargé
		function init(){
			var
				id=58,
				eltId="divid"+id,
				targetElement=document.getElementById(eltId),
				status=readCookie(id);
				targetElement.style.display=(status==="opened")?"none":"";
 
			visibilite(id)
		}
		window.onload=init;
	//]]>
	</script>
</head>
<body>
	<img src="detail.png" name="IMG58" id="58" onclick="visibilite(this.id)" />
	<div id="divid58" style="display:none;">test</div>
</body>
</html>

voyageurdumonde · 21/08/2011, 17h15

Merci pour vos infos,

Citation:

Ca dépend ce qu'il veut faire exactement, s'il ne veut le conserver que lors d'un reload causé par un formulaire par exemple. Il peut simplement sauver des données via des GET/POST et les rétablir en php.

C'est effectivement plutot cela que je cherche a faire. Mais comment sauver des données via des GET/POST et les rétablir en php?

Merci Eric2a pour la programmation des cookies

Willpower · 21/08/2011, 17h36

Citation:

Envoyé par voyageurdumonde

Merci pour vos infos,

C'est effectivement plutot cela que je cherche a faire. Mais comment sauver des données via des GET/POST et les rétablir en php?s

si tu es dans un formulaire, il te suffit d'avoir un input de type "hidden" auquel tu changes dynamiquement la valeur via javascript pour savoir si ta zone est caché ou non.

pour les rétablir en php il suffit de faire un if($_GET/$_POST) echo qqe chose.

soit en css pour cacher/afficher le div, soit générer un peu de javascript.

exemple :

Code php :

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
 
<?php  
  $display = 1;
  if(isset($_POST['display']) && intval($_POST['display']))
    $display = 0;
?>
<script type="text/javascript">
  function changer(){
    var v = document.getElementById('display').value;
    document.getElementById('display').value = 1 - v;
    document.getElementById('zoneSup').style.display = v?"block":"none";
  }
</script>
<form method="post" >
  <input type="button" onclick="change();" style="display:<?php echo $display?"block":"none"; ?>;" />
  <div id="zoneSup">info compltémentaire</div>
  <input type="hidden" id="display" name="display" value="<?php echo $display; ?>" />
</form>

voyageurdumonde · 21/08/2011, 19h08

J'ai finalement opte pour la solution de Eric2a et des cookies.
J'ai juste place

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function init(){
			var
				id=58,
				eltId="divid"+id,
				targetElement=document.getElementById(eltId),
				status=readCookie(id);
				targetElement.style.display=(status==="opened")?"none":"";
 
			visibilite(id)
		}
		window.onload=init;

a la fin de la page juste avant </BODY> et donc en dehors de la balise head car les id sont generes dynamiquement en PHP et il n'existe pas encore de numero de ID lorsque le code est execute cette partie.
Je ne sais pas si cela est correcte au niveau des regles de la programmation mais ca fonctionne!

Eric2a · 21/08/2011, 20h49

Citation:

Envoyé par voyageurdumonde

Je ne sais pas si cela est correcte au niveau des regles

Comme tu as pu le constater après la modification que tu as portée, cela est parfaitement correct

voyageurdumonde · 21/08/2011, 20h59

merci

21/08/2011, 15h24	#2
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 795 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 795 Points : 5 119 Points : 5 119	bonjour, il y a deux possibilités : - la première sont les cookies : tu enregistres l'état de tes div dans un cookie. Lorsque tu recharges la page tu vas y lire les informations. Si le cookie n'existe pas tu appliques la mise en page par défaut. - la seconde serait d'envoyer l'état de tes div au serveur (ajax). Au moment de la génération de la page tu vas lire les paramètres à appliquer sur chaque div.
	00

21/08/2011, 20h59	#9
voyageurdumonde Membre habitué Inscription : décembre 2007 Messages : 392 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : décembre 2007 Messages : 392 Points : 118 Points : 118	merci
	00

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