11402 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour, je bug encore sur un problème Smiley sweatdrop

J'ai ça:
Quand je clique sur un bouton, le css change sur ma page, à l'aide d'un code javascript.

Le problème c'est que lorsque j'actualise (f5) la page, je retrouve l'ancien css (avant le clique sur le bouton) alors que je veux que le style reste. (j'ai lu qu'il fallait utiliser un cookie mais j'y connais rien Smiley sweatdrop )

Voila le code du changement de style (oui on m'avait déja aidé ici pour ca Smiley jap ):
http://codepen.io/JUSEN/pen/vGjYRB

Un dessin pour récapitulé:

upload/61751-dessin.png

Merci d'avance Smiley prie
Modifié par Xan (21 Apr 2016 - 10:46)
Salut,

En effet, ce type de choix de personnalisation chez l’utilisateur doit se faire via l'enregistrement d'un cookie sur le navigateur du client.
Tu as de la chance, les cookies sont accessibles par PHP mais aussi en JS !
Ils sont cependant plus facilement accessibles en PHP. Utilises-tu un langage serveur dans ton projet, genre PHP Smiley langue ?
MatthieuR a écrit :
Salut,

En effet, ce type de choix de personnalisation chez l’utilisateur doit se faire via l'enregistrement d'un cookie sur le navigateur du client.
Tu as de la chance, les cookies sont accessibles par PHP mais aussi en JS !
Ils sont cependant plus facilement accessibles en PHP. Utilises-tu un langage serveur dans ton projet, genre PHP Smiley langue ?


Merci de ta réponse Smiley smile
Ok, non, il faudrait que j'utilise un script javascript Smiley sweatdrop
Ok, pas de problème, c'est possible.
Soit tu utilises une petite lib, celle-là est pas mal : https://github.com/ScottHamper/Cookies
Soit tu codes tout à la mano et je te laisse voir comment ça fonctionne : https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/les-cookies-1

Dans cet exemple je m'appuie sur la lib dont je te parle juste avant, je ne suis pas du genre à recoder un truc un peu chiant juste pour le plaisir...

Change de style et rafraîchi ta page, le style se ré-applique ! Magique non !

EDIT : si tu veux voir tes cookies, ils sont dispos dans ton navigateur :
upload/56501-cookies.png
Et bien sûr tu peux paramétrer la durée d'expiration :
Cookies.set('key', 'value', { expires: 31536000 });//1 an en secondes

Modifié par MatthieuR (20 Apr 2016 - 16:19)
MatthieuR a écrit :
Ok, pas de problème, c'est possible.
Soit tu utilises une petite lib, celle-là est pas mal : https://github.com/ScottHamper/Cookies
Soit tu codes tout à la mano et je te laisse voir comment ça fonctionne : https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/les-cookies-1

Dans cet exemple je m'appuie sur la lib dont je te parle juste avant, je ne suis pas du genre à recoder un truc un peu chiant juste pour le plaisir...

Change de style et rafraîchi ta page, le style se ré-applique ! Magique non !

EDIT : si tu veux voir tes cookies, ils sont dispos dans ton navigateur :
upload/56501-cookies.png
Et bien sûr tu peux paramétrer la durée d'expiration :
Cookies.set('key', 'value', { expires: 31536000 });//1 an en secondes



Merci à toi,j'étais bien bloqué Smiley prie Smiley prie
Elle est super cette lib, je vais l'utiliser Smiley biggrin
Codé avec pleins de commentaires qui expliquent en plus, merci t'es au top Smiley jap
Utilises cette librairie sans hésitation, ça ne t'empêche pas d'aller voir quand même comment JS manipule les cookies, pour que tu comprennes.
MatthieuR a écrit :
Utilises cette librairie sans hésitation, ça ne t'empêche pas d'aller voir quand même comment JS manipule les cookies, pour que tu comprennes.


Oui merci Smiley smile

J'ai chargé la librairie:
<script type = "text/javascript" src="Cookies.js"></script>

mais bizarrement ça ne marche pas Smiley ohwell

J'édit mon message, enfaite ça marche sur firefox mais pas sur chrome Smiley sweatdrop
Modifié par Xan (20 Apr 2016 - 18:10)
Bonjour,

Pourquoi ne pas utiliser localstorage pour ça ? C'est plus simple et pas de nouvelle librairie à charger.
SolidSnake a écrit :
Bonjour,

Pourquoi ne pas utiliser localstorage pour ça ? C'est plus simple et pas de nouvelle librairie à charger.


Je ne connais pas mais je vais regarder aussi, merci Smiley smile
Matieu: Enfaite je viens de réaliser que le code ne marche pas sur chrome mais marche sur firefox Smiley eek

Si vous voyez une solution à ce problème.. Smiley sweatdrop
@Solidsnake : carrément, localstorage serait tout à fait adapté. J'étais resté sur les cookies car je pensais à l'éventualité d'en faire une utilisation côté serveur, mais dans ce cas, en effet il vaut mieux utiliser localstorage, vachement plus simple à utiliser !

@Xan : je ne comprends pas trop pourquoi ça ne fonctionne pas... La démo sur Codepen fonctionne sur Chrome en tous cas. Qu'est-ce qui ne fonctionne pas ? Tu as des erreurs dans ta console ?
Et si tu veux, bascule simplement sur localstorage...
MatthieuR a écrit :
Tu charges la lib par npm ou bien tu l'as téléchargée ?
Le lien de téléchargement est là : https://raw.githubusercontent.com/ScottHamper/Cookies/1.2.2/dist/cookies.min.js

Je viens de voir que j'avais une petite erreur au test du 'undefined' : il faut enlever les quotes puisque je fais une comparaison stricte (!==) et undefined est une constante, comme false, true...


C'est bizarre en enlevant les quotes, j'ai cru que ca avait l'air de marcher sur chrome et en retestant ensuite ca marchait plus c'est fou Smiley confus ( et sinon pour répondre je télécharge la lib en copiant le code dans un fichier js ) Smiley smile

Edit: Ca marche même sur internet explorer mais pas sur chrome Smiley eek
Modifié par Xan (21 Apr 2016 - 01:23)
SolidSnake a écrit :
Pourquoi ne pas utiliser localstorage pour ça ? C'est plus simple et pas de nouvelle librairie à charger.

C'est exactement la solution que j'avais adopté pour cette page (voir le code source dans la page) : Scriptura, Themes
MatthieuR a écrit :
@Solidsnake : carrément, localstorage serait tout à fait adapté. J'étais resté sur les cookies car je pensais à l'éventualité d'en faire une utilisation côté serveur, mais dans ce cas, en effet il vaut mieux utiliser localstorage, vachement plus simple à utiliser !

@Xan : je ne comprends pas trop pourquoi ça ne fonctionne pas... La démo sur Codepen fonctionne sur Chrome en tous cas. Qu'est-ce qui ne fonctionne pas ? Tu as des erreurs dans ta console ?
Et si tu veux, bascule simplement sur localstorage...


Enfaite sur chrome, en rafraîchissant la page, cela affiche le 1er style de tableau (comme si il n'y avait pas le script ) Smiley ohwell
Il n'y a pas d'erreur enfin je ne pense pas, comment voir la console sur une page web? Smiley confus
Olivier C a écrit :

C'est exactement la solution que j'avais adopté pour cette page (voir le code source dans la page) : Scriptura, Themes


Quels sont les lignes de ce code source dois je regarder? Smiley confused
Xan a écrit :

Il n'y a pas d'erreur enfin je ne pense pas, comment voir la console sur une page web? Smiley confus

Ah et bien tu appuies sur la touche F12 Smiley biggrin
Par exemple dans Chrome, tu auras ça :
upload/56501-console.png
Pour afficher/masquer la console tu appuies sur "Esc". C'est la base pour débuguer du JS.

Sinon, vraiment plus simplement, tourne-toi vers localstorage, plus simple à manipuler si tu n'as pas besoin de mettre en commun des cookies entre différents langages.
Voici le même exemple qu'avant avec localStorage, du coup sans aucun chergement de lib externe.
Tu peux débuguer et voir les données stockées dans l'onglet Resources de ton "Dev Tools" (F12)
MatthieuR a écrit :

Ah et bien tu appuies sur la touche F12 Smiley biggrin
Par exemple dans Chrome, tu auras ça :
upload/56501-console.png
Pour afficher/masquer la console tu appuies sur "Esc". C'est la base pour débuguer du JS.

Sinon, vraiment plus simplement, tourne-toi vers localstorage, plus simple à manipuler si tu n'as pas besoin de mettre en commun des cookies entre différents langages.
Voici le même exemple qu'avant avec localStorage, du coup sans aucun chergement de lib externe.
Tu peux débuguer et voir les données stockées dans l'onglet Resources de ton "Dev Tools" (F12)


Merci, apparemment il n'y a aucune erreur, sinon on m'a dit que pour chrome ça devrait marcher sur serveur mais pas en local, mais je sais pas si c'est juste. Smiley ohwell
L'exemple avec localStorage c'est juste écrire "shadow*root (open)"? Smiley confused
Modifié par Xan (21 Apr 2016 - 09:55)
Tu auras par contre, que se soit avec des cookies ou avec localStorage, un petit temps de latence de l'affichage de ton style personnalisé puisque tu le charges en JS, donc après ton HTML et après l'application du style.
Tu auras donc l'affichage par défaut brièvement puis le changement de classe et l'application du style.
Pour pallier un peu à petit problème, tu peux envisager un affichage retardé que lorsque ta classe est modifiée.
Tu peux voir sur le pen mis à jour : http://codepen.io/korell/pen/VadJYX
Pages :