Garder en memoire l'etat d'une fonction Javascript

**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

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,

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

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!