Garder en memoire l'etat d'une fonction Javascript

Version imprimable

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:

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>

21/08/2011, 15h24
Auteur

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.
21/08/2011, 16h21
Willpower

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.

Salut,

Pareil pour les cookies...

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

21/08/2011, 17h15
voyageurdumonde

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

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:

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>

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

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!

21/08/2011, 20h49
Eric2a

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 ;)
21/08/2011, 20h59
voyageurdumonde

merci