Discussion :

[zoumzoum59]

Bonjour à tous,

je cherche le moyen de ré-afficher la valeur de sélection d'un datePicker après avoir fait une actualisation de la page.
J'ai essayé ce code.mais cela ne fonctionne pas:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
day = "";
vardateInput = document.querySelector('[name="oneDate"]');
dateInput.addEventListener("input", function (event) {
day = $("#getPickerDate").val();
 
window.location.href = window.location.href;
 
$("#getPickerDate")
      .datepicker()
      .on("show", function () {
$(this).val(day).datepicker("update");
      });
  });

Merci d'avance

[SpaceFrog]

Il faut stocker la valeur quelque part ?
Est elle sur ton serveur ?
Sinon tu devras avant le rechargement de la page la stocker en cookie ou local storage (avec les contraintes GRPD associées)

[zoumzoum59]

Merci SpaceFrog,

Non elle n'est pas sur mon serveur, c'est le client qui la saisie.

La stocker dans une simple variable, ne suffit pas?
Il faut passer obligatoirement par un cookie ou par un local storage?

Si c'est le cas je vais devoir me documenter, car je n'en ai jamais utilisé jusque là.

[SpaceFrog]

Js ne survit pas à un rechargement de page
Si tu le mets juste dans une variable, elle sera vide au rechargement de page, d'où la nécessité de passer par des cookies ou du local storage qui eux survient au rechargement de page, mais sont soumis à l'acceptation de l'utilisateur (GRPD)

[zoumzoum59]

Merci pour le complément d'info,

Je viens d'essayer d'utiliser le local storage, et j'ai codé ça:

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
21
22
23
var dateInput = document.querySelector('[name="oneDate"]');
 
  dateInput.addEventListener("input", function (event) {
 
 
    localStorage.setItem("day", $("#getPickerDate").val());
 
 
    window.location.reload(true);
 
 
    day = localStorage.getItem("day");
    alert(day);
 
    $("#getPickerDate")
 
      .datepicker()
 
      .on("show", function () {
        $(this).val(day).datepicker("update");
      });
 
  });

J'ai testé et j'initialise bien ma variable dans le local storage, elle est bien présente avant l'actualisation, mais plus après.
Pouvez vous me dire ce qui cloche, car apparemment c'est pas très compliqué a utiliser.

[zoumzoum59]

J'ai pas testé sur différents navigateurs, mais ce code à l'air de fonctionner:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var dateInput = document.querySelector('[name="oneDate"]');
  dateInput.addEventListener("input", function (event) {
    var day = $("#getPickerDate").val();
 
    history.go();
 
    $("#getPickerDate")
      .datepicker()
      .on("show", function () {
        $(this).val(day).datepicker("update");
      });
  });

Si vous avez une remarque n’hésitez surtout pas.

Bon mais après test sur Chrome, ça ne fonctionne pas donc retour à la case départ(on m'avait prévenu pourtant!!!)

[SpaceFrog]

sur le onload de ta page tu dois vérifier si la donnée existe en cookie ou en storage et l'affecter à ton datepicker ...

[SpaceFrog]

Une autre possibilité serait de faire un ajax sur le change du datepicker qui conserve la date dans une variable de session coté serveur ...
Il te suffirait alors d'attribuer la valuer de la variable de session à ton datepicker coté serveur

[zoumzoum59]

sur le onload de ta page tu dois vérifier si la donnée existe en cookie ou en storage et l'affecter à ton datepicker ...

Merci de ton retour SpaceFrog,

Mais n'étant pas un pro comment vérifie t'on sur le onload?

J'ai tenter quelque chose dans le genre en localStorage et sessionStorage:

Code :

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

1
2
3
4
for (let i = 0; i < sessionStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${sessionStorage.getItem(key)}`);
}

Mais je n'ai pas vu ma variable défiler.

Sinon mon picker me sert a actualiser un graphe créer avec Chart.js, n'y a t'il pas un moyen de ne rafraichir que le graphe sans rafraichir toute la page?

[ProgElecT]

Salut

Un moyen de récupération

Code :

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

1
2
3
4
5
6
let VarRcupe =localStorage.getItem('NomDeTaVariable')
if(!VarRcupe){
	alert("VarRcupe = " + VarRcupe)
}else{
	alert("Pas de variable en localStorage")
}

[zoumzoum59]

Merci ProgElect,

J'ai donc testé avec ce 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
let VarRcupe = localStorage.getItem("getDay");
if (!VarRcupe) {
  alert("VarRcupe = " + VarRcupe);
} else {
  alert("Pas de variable en localStorage");
}
day = "";
document.addEventListener("DOMContentLoaded", function () {
  var dateInput = document.querySelector('[name="oneDate"]');
  dateInput.addEventListener("input", function (event) {
    day = $("#getPickerDate").val();
    localStorage.setItem("getDay", day);
 
    history.go();
    day = localStorage.getItem("getDay");
    alert(day);
    $("#getPickerDate").val(day);
  });

Et aucune variable localStorage n'est enregistré, d’ailleurs même la fin de la function (event), n'est pas exécuté.
Après "history.go();" on sort de la function (event).
Dans le code si dessus "alert(day);" n'est jamais exécuté.

[ProgElecT]

Re

Insérez un alert("coucou"); en ligne 13, et regardez dans la console (shift + F9 sous FF) et vérifier le Stockage local, la date devrait y être inscrit pour key="getDay".
Si cela n'est pas le cas et/ou si l'alerte n'est pas déclenchée, il faut revoir le déclencheur dateInput.addEventListener("input", function (event) ......

[zoumzoum59]

Oui ma date est bien dans la console dans stockage local.

Mais comment je peux la récupérer, car jusque là je n'ai pas réussi?

[ProgElecT]

Peut être

Code :

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

1
2
3
4
5
6
document.addEventListener('DOMContentLoaded', function() {
	if(localStorage.getItem('getDay')){
		day = localStorage.getItem("getDay");
		$("#getPickerDate").val(day);
	}
})

[zoumzoum59]

J'ai essayé dans la function (event) et après, mais je ne récupère dans aucun des deux cas la variable:

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
day = "";
document.addEventListener("DOMContentLoaded", function () {
  var dateInput = document.querySelector('[name="oneDate"]');
  dateInput.addEventListener("input", function (event) {
    day = $("#getPickerDate").val();
    localStorage.setItem("getDay", day);
    //alert("coucou");
    window.location.reload(true);
    //history.go();
  });
 
  document.addEventListener("DOMContentLoaded", function () {
    if (localStorage.getItem("getDay")) {
      day = localStorage.getItem("getDay");
      $("#getPickerDate").val(day);
    }
  });

[SpaceFrog]

Il faut lancer la vérification au chargement de la page sur le onload ...

[zoumzoum59]

Autant pour moi, j'avais mal gérer la position du code.

Comme cela marche très:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
//Changement du datePicker et actualisation de la page
document.addEventListener("DOMContentLoaded", function () {
  var dateInput = document.querySelector('[name="oneDate"]');
  dateInput.addEventListener("input", function (event) {
    day = $("#getPickerDate").val();
    localStorage.setItem("getDay", day);
    window.location.reload(true);
  });
  //Récupération de la variable localStorage
  if (localStorage.getItem("getDay")) {
    day = localStorage.getItem("getDay");
    $("#getPickerDate").val(day);
  }

Merci ProgElect et SpaceFrog, sans vous je n'y serais pas arrivé.