Retour arrière => Refresh

**laurentSc** · 01/09/2013, 00h27

Bonsoir,

je ne sais pas si mon problème a un rapport avec le js, mais comme il y a en jeu des fonctions js, je poste ici.

Donc j'ai une fonction "expand" qui fait ce que son nom indique, et une fois qu'on a "expandé", on a une liste de noms avec des liens, et si on suit un de ces liens , puis qu'on y fait "retour arrière", on revient à la page d'origine, mais non "expandée" (autrement dit la page d'origine sur laquelle on aurait fait un refresh, car bien sûr, ça élimine l'expand) ; or si on fait un retour arrière, je voudrais conserver l'expand ; si j'ai été clair, comment faire cela ?

Invité · 01/09/2013, 13h19

Bonjour Laurent,
A ma connaissance, le "retour arrière" ne conserve pas l'historique des instructions JavaScript effectués sur la précédente page.

Une solution :

enregistrer l'instruction "expandé/pas expandé" via Ajax dans une SESSION.
la tester au retour sur la page concernée.

Mais ça me parait être "beaucoup de soucis pour rien".

**laurentSc** · 01/09/2013, 13h35

Mais ça me parait être "beaucoup de soucis pour rien".

Je suis bien obligé de partager ton opinion, car ce que je veux faire, c'est pour le boulot ; or, comme tu dis "SESSION", ça veut dire PHP, or les serveurs de ma boîte n'exécutent pas le PHP (quand j'en fais, c'est à titre perso) et de plus, tu parles d'AJAX, donc même si je viens de mettre dans mes favoris un tuto sur l'AJAX, vu dans une autre discussion, je ne connais pas encore...

**laurentSc** · 01/09/2013, 20h10

Je reviens vers toi car je me pose une question en relisant ta réponse : tu dis de faire une session via AJAX : même si le serveur ne peut exécuter le PHP, ça tient quand même la route ?

Invité · 01/09/2013, 20h12

Non. Oublie les SESSION PHP.

C'est possible de créer/lire/détruire un cookies en JavaScript seul (sans Ajax ni PHP, donc).

=> La gestion des cookies en JavaScript

**laurentSc** · 01/09/2013, 20h21

Merci pour ta réponse ; je vais regarder.

**SylvainPV** · 02/09/2013, 00h51

Oublie les cookies également. Envoyer à chaque header de requête un cookie pour juste savoir l'état d'un menu, quelle plaie !

J'utiliserais personnellement les hash dans l'url (la partie après le #). Je pense qu'ils sont là pour ça. Changer le hash d'une page au clic sur le bouton "expand" ne déclenchera pas une redirection. Puis après clic sur lien puis action Précédent, l'URL rechargée aura toujours le hash #expand par exemple. Il suffit ensuite en Javascript de récupérer le hash via window.location.hash et d'étendre le menu s'il correspond à l'état expand.

**laurentSc** · 02/09/2013, 01h14

Je ne connais pas du tout ce truc, tout juste remarqué parfois la présence d'un # (mais toujours avec rien derrière). Je pense avoir compris ton idée, mais comment changer le hash au départ (sur clic sur le bouton "expand") ?

01/09 10h40 : J'ai décoché

car j'espère une réponse...

**laurentSc** · 02/09/2013, 15h38

J'ai trouvé la réponse (très simple) sans aide : il suffit d'écrire dans window.location.hash :

Code :

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

1
2
3
4
5
6
7
8
9
function expand(name){
  var Item = document.getElementById(name); 
  Item.style.display=(Item.offsetWidth == 0)?"block":"none"; 
  window.location.hash=Item.style.display; 
 
}
...
 <div style="display:window.location.hash;" id="User_Centric">
...

par contre, y a quand même un truc pour lequel j'ai besoin d'aide : la première fois qu'on charge la page, je voudrais qu'elle soit "collapsée" ; or, elle est "expandée". Voilà ce que j'ai essayé mais qui ne marche pas :

Code :

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

1
2
3
4
5
 function init() {
        window.location.hash="none";
      }
...
<body onload="init();">

**SylvainPV** · 02/09/2013, 16h22

Il faut au chargement de la page récupérer le hash et étendre ou non le menu en conséquence. J'ai modifié ta fonction expand pour qu'elle prenne en argument un booléen qui force l'état. Par défaut, la page n'a pas de hash et par conséquent la fonction expand sera appelée avec expanded à false, donc avec le menu replié.

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
 
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded= (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display= expanded ? "block" : "none"; 
  window.location.hash= expanded ? "expanded" : "";
 
}
...
 <div id="User_Centric">
...
 
function init() {
    expand("User_Centric", window.location.hash==="expanded");
}

**laurentSc** · 02/09/2013, 18h17

Je viens d'essayer ton truc mais page blanche...et je trouve pas le bug ; des fois que je me sois trompé en recopiant, je mets mon code :

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
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded= (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display= expanded ? "block" : "none"; 
  window.location.hash= expanded ? "expanded" : "";
 
}
 
function init() {
    expand("User_Centric", window.location.hash==="expanded");
}
...
<body onload="init();">
    <div id="User_Centric"><a href="#" onclick="expand('User_Centric','User_Centric')">User Centric</a>
...

**NoSmoking** · 02/09/2013, 20h24

Bonjour,
décidément Laurent tu es fâché avec les déclaration CSS, cela sort d'où

Code html :

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

<div style="display:window.location.hash;" id="User_Centric">

[EDIT]
autre chose, window.location.hash==="#expanded", le # fait partie du hash.

**laurentSc** · 02/09/2013, 20h41

Tu as raison : sans m'en rendre compte, je mélangeais du html et une variable js ! Mais ceci est un vieil essai, qui n'existe plus dans celui de 17h17...

**SylvainPV** · 03/09/2013, 10h27

Page blanche ? Rien dans la console JS ?

Sinon pour l'appel de la fonction expand au onclick de ton lien, si tu veux que l'état bascule déplié/replié, il faut retirer le second paramètre. C'est à ça que sert la condition sur expanded === undefined dans le code.

**laurentSc** · 03/09/2013, 11h21

Page blanche ? Rien dans la console JS ?

Désolé, mais j'y connais pas grand chose, et je sais pas afficher cette console...

Sinon pour l'appel de la fonction expand au onclick de ton lien, si tu veux que l'état bascule déplié/replié, il faut retirer le second paramètre. C'est à ça que sert la condition sur expanded === undefined dans le code.

comprends pas.

EDIT : si je commente le contenu de init(), plus de page blanche. Sinon, pas de basculement sur le onclick.

Invité · 03/09/2013, 11h44

Bonjour,
à tester :

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
<script>
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
//  window.location.hash = expanded ? "#expanded" : ""; // (cette instruction ne fonctionne pas pour moi...)
  // modification du href et texte du lien
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Fermer" : "Ouvrir";
 
}
function init() {
    expand("User_Centric", window.location.hash==="#expanded");
}
</script>

Code :

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

1
2
3
4
5
6
7
<body onload="init();">
<a id="User_CentricBt" href="#" onclick="expand('User_Centric');">Ouvrir</a>
<div id="User_Centric">
sdfg sdfgsdfg sdg sdfg<br />
sdf gsdgfsdfg sdfg<br />
sdf gsdfgdfg ssdf<br />
</div>

**laurentSc** · 03/09/2013, 13h03

Merci pour ta proposition

Elle marche parfaitement ; pour le vérifier, j'ai remplacé un sdfg sdfgsdfg sdg sdfg par un lien, et ça marche bien ; par contre, il y a 3 trucs que je comprends pas:
- pourquoi le Bt (si je l'enlève, ça marche plus ( (disparition du lien ouvrir/fermer))) ?
- ds le onclick, à la fonction expand, tu passes un seul paramètre ; j'en déduis que dans la fonction, la variable "expanded" est à "undefined", donc je la remplace par (Item.offsetWidth == 0), et ça ne marche plus non plus (panique totale)
- document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#"; : Apparemment cette ligne complète le lien (concaténation) alors que je croyais que ça le réécrivait (que le nouveau lien était la valeur affectée). Quel est le comportement ?

Invité · 03/09/2013, 13h15

1/ Parce que l'id du lien est : "User_CentricBt"

Code :

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

document.getElementById(id+'Bt')

équivaut à écrire :

Code :

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

document.getElementById('User_CentricBt')

2/ et 3/ Le code est assez simple et les notation suffisamment explicites, je pense.

Pas besoin d'être sorti de Polyclinique pour comprendre, si ?

**SylvainPV** · 03/09/2013, 14h25

Soit on change l'attribut href du lien, soit on manipule le hash directement en Javascript au onclick. Là on fait les deux, donc je ne comprends plus.

Invité · 03/09/2013, 14h52

Envoyé par SylvainPV

... soit on manipule le hash directement en Javascript au onclick...

Tu parles de cette ligne ?

Code :

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

//  window.location.hash = expanded ? "#expanded" : ""; // (cette instruction ne fonctionne pas pour moi...)

Si je dé-commente (en supprimant la ligne .....'Bt').href...), aucun changement de l'URL.

[EDIT] @SylvainPV
En fait, ""#expanded" s'affiche très grièvement dans l'URL, puis se change en "#"
Ai-je une erreur dans le code ?

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
<script>
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  window.location.hash = expanded ? "#expanded" : "";
  // modification du href et texte du lien
  document.getElementById(id+'Bt').innerHTML = expanded ? "Fermer" : "Ouvrir";
//  alert(window.location.hash);
 
}
function init() {
    expand("User_Centric", window.location.hash==="#expanded");
}
</script>

Retour arrière => Refresh

JavaScript

Discussions similaires

Partager

Partager