Actualiser un div avec cookie et jquery ajax
Résolu/Fermé
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
-
29 juil. 2013 à 01:17
diice Messages postés 131 Date d'inscription lundi 17 novembre 2003 Statut Membre Dernière intervention 25 février 2017 - 31 juil. 2013 à 16:01
diice Messages postés 131 Date d'inscription lundi 17 novembre 2003 Statut Membre Dernière intervention 25 février 2017 - 31 juil. 2013 à 16:01
A voir également:
- Ajax cookie
- Cookie manager - Télécharger - Confidentialité
- Supprimer cookie - Guide
- Cookie jam sur facebook - Forum jeux en ligne
- Passer variable javascript en php ajax ✓ - Forum PHP
- Erreur ajax ✓ - Forum Javascript
9 réponses
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
30 juil. 2013 à 15:18
30 juil. 2013 à 15:18
Alors enfaite les cookie sont manipulable en javascript et en php !
jQuery n'a pas de méthode plus simple pour gérer les cookie. Donc javascript en dur ! Mais sur w3c tu as deux fonctions toutes faite qui marchent très bien ;-) setCookie(name, value) et getCookie(name) :
https://www.w3schools.com/JS/js_cookies.asp
Donc première étape, dans ton index :
setInterval avec dedans une function qui fera un appel ajax vers un fichier php.
Le fichier php te génèrera ton cookie, donc enfaite la fonction setCookie() ne servira pas.
ton fichier php quant à lui, récupèrera les informations "now playing", et les met dans un cookie.
https://www.php.net/manual/fr/function.setcookie.php
https://www.php.net/manual/fr/features.cookies.php
Ensuite dans ta pop up :
Un setInterval qui lui ira vérifier le cookie.
Donc un simple if info actuelle != cookie alors tu met à jour la div, sinon rien !
jQuery n'a pas de méthode plus simple pour gérer les cookie. Donc javascript en dur ! Mais sur w3c tu as deux fonctions toutes faite qui marchent très bien ;-) setCookie(name, value) et getCookie(name) :
https://www.w3schools.com/JS/js_cookies.asp
Donc première étape, dans ton index :
setInterval avec dedans une function qui fera un appel ajax vers un fichier php.
Le fichier php te génèrera ton cookie, donc enfaite la fonction setCookie() ne servira pas.
ton fichier php quant à lui, récupèrera les informations "now playing", et les met dans un cookie.
https://www.php.net/manual/fr/function.setcookie.php
https://www.php.net/manual/fr/features.cookies.php
Ensuite dans ta pop up :
Un setInterval qui lui ira vérifier le cookie.
Donc un simple if info actuelle != cookie alors tu met à jour la div, sinon rien !
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
29 juil. 2013 à 08:52
29 juil. 2013 à 08:52
Salut !
Tu n'aurais même pas besoin de cookie à vrai dire.
Comment t'as fait ton site ? Avec un modèle MVC ?
Concrètement dans ton html, tu auras un truc du genre :
<div id="nowPlaying"></div>
Le jQuery ressemblera à ca :
setInterval(function(){
$.ajax({
type:"post",
url:"monfichierquirenvoielesinfos.php"
}).done(function(data){
$('#nowPlaying").html(data);
});
}, 60000); // 60000 correspond à une minute
Dans ton fichier PHP, il faut que tu fasses un echo de ce que tu souhaites mettre dans ta div, tout simplement !
Tu n'aurais même pas besoin de cookie à vrai dire.
Comment t'as fait ton site ? Avec un modèle MVC ?
Concrètement dans ton html, tu auras un truc du genre :
<div id="nowPlaying"></div>
Le jQuery ressemblera à ca :
setInterval(function(){
$.ajax({
type:"post",
url:"monfichierquirenvoielesinfos.php"
}).done(function(data){
$('#nowPlaying").html(data);
});
}, 60000); // 60000 correspond à une minute
Dans ton fichier PHP, il faut que tu fasses un echo de ce que tu souhaites mettre dans ta div, tout simplement !
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
30 juil. 2013 à 00:49
30 juil. 2013 à 00:49
Merci beaucoup Jeremy,
en fait c'est deja ce que je fais pour l'affichage dans ma pop up, dans le player.
le souci c'est que j'aimerai reprendre les informations de chaques nouveau titre sur la page parent a la popup...
c'est pourquoi j'enregistre ca dans des cookies, histoire de pouvoir balancer mes infos de la pop up a la page parent.
en fait ce que j'aimerai c'est une espece de settimeout qui me raffaichissent le contenu des cookies sans avoir a recharger la page... (la page parent...)
c pas facile a expliquer :)
en fait c'est deja ce que je fais pour l'affichage dans ma pop up, dans le player.
le souci c'est que j'aimerai reprendre les informations de chaques nouveau titre sur la page parent a la popup...
c'est pourquoi j'enregistre ca dans des cookies, histoire de pouvoir balancer mes infos de la pop up a la page parent.
en fait ce que j'aimerai c'est une espece de settimeout qui me raffaichissent le contenu des cookies sans avoir a recharger la page... (la page parent...)
c pas facile a expliquer :)
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
30 juil. 2013 à 08:45
30 juil. 2013 à 08:45
Bah c'est le même principe !
Tu fais ton appel ajax, tu récupères les infos, ces infos tu les mets dans ton cookie, et tu remet ta div à jour avec les infos du cookie ! Tout ca dans un setInterval :)
Tu fais ton appel ajax, tu récupères les infos, ces infos tu les mets dans ton cookie, et tu remet ta div à jour avec les infos du cookie ! Tout ca dans un setInterval :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
30 juil. 2013 à 14:15
30 juil. 2013 à 14:15
salut Jeremy,
ben en fait, y'a que ma popup qui met a jour les infos...
la page parent elle doit jsute rapatrier les nouvelles mises a jour des cookies...
donc, je veux bien qu'il y est un setInterval, la dessus on est d'accord, mais comment je peux interroger des cookie mis a jour dans la popup sans recharger ma page principale...
parce qu'en fait dans la popup, c'est une requete aleatoire, du coup je peux pas savoir vraiment ce qu'il y aura 'a venir'... c pour ca que je stocke a haque nouveau titre dans des cookies, et il me juste savoir comment, en ajax ou jquery je peux interroger ses cookie mis a jour dans une autre page (ma popup).
j'ai bien trouvé un plugin jquery quui gere les cookie, mais pas exactement ce que je veux faire..
et j'ai beau chercher, je vois rien qui se rapproche de ce que je veux...
ben en fait, y'a que ma popup qui met a jour les infos...
la page parent elle doit jsute rapatrier les nouvelles mises a jour des cookies...
donc, je veux bien qu'il y est un setInterval, la dessus on est d'accord, mais comment je peux interroger des cookie mis a jour dans la popup sans recharger ma page principale...
parce qu'en fait dans la popup, c'est une requete aleatoire, du coup je peux pas savoir vraiment ce qu'il y aura 'a venir'... c pour ca que je stocke a haque nouveau titre dans des cookies, et il me juste savoir comment, en ajax ou jquery je peux interroger ses cookie mis a jour dans une autre page (ma popup).
j'ai bien trouvé un plugin jquery quui gere les cookie, mais pas exactement ce que je veux faire..
et j'ai beau chercher, je vois rien qui se rapproche de ce que je veux...
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
30 juil. 2013 à 14:18
30 juil. 2013 à 14:18
Un cookie c'est sur un site. Donc si tu mets un cookie sur ton index, il est accessible sur ta pop up.
Donc dans ton index, tu récupères ton cookie toutes les x secondes.
Dans ta pop up, tu vérifies toutes les x secondes ton cookie, si il a changé tu le mets à jour dans ta div, sinon pas de modif
Donc dans ton index, tu récupères ton cookie toutes les x secondes.
Dans ta pop up, tu vérifies toutes les x secondes ton cookie, si il a changé tu le mets à jour dans ta div, sinon pas de modif
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
30 juil. 2013 à 14:30
30 juil. 2013 à 14:30
c exactement ça :)
on s'est compris !
sauf que je vois absolument pas comment interroger un cookie avec jquery ou ajax !!
comme je te dis j'ai beau chercher je vois rien du tout...
je pense que ca serait un truc du style ?
mais comment insérer la dedans mes cookie ??
parce que l'url j'en ai pas besoin en fait... ?! si ?
je vois pas trop comment faire ...
on s'est compris !
sauf que je vois absolument pas comment interroger un cookie avec jquery ou ajax !!
comme je te dis j'ai beau chercher je vois rien du tout...
je pense que ca serait un truc du style ?
var refresh = setInterval(function () { $.ajax({ url : "....", success : function(data) { $("#NowPlaying").append(data); } }); }, 10000);
mais comment insérer la dedans mes cookie ??
parce que l'url j'en ai pas besoin en fait... ?! si ?
je vois pas trop comment faire ...
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
30 juil. 2013 à 15:53
30 juil. 2013 à 15:53
je te remercie beaucoup,
je vasi essayer tout ça ce soir et je te dis ce qu'il en est !
merci encore pour ta disponibilité !
je vasi essayer tout ça ce soir et je te dis ce qu'il en est !
merci encore pour ta disponibilité !
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
30 juil. 2013 à 15:54
30 juil. 2013 à 15:54
Ca marche pas de problème :) Je suis là demain si jamais !
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
Modifié par diice le 31/07/2013 à 13:38
Modifié par diice le 31/07/2013 à 13:38
bon, nikel ca marche !!
merci beaucoup pour ton aide :)
je vais décrire comment j'ai fait au cas ou si ca peut servir a d'autres !
alors dans un premier temps j'ai une pop up avec le player jPlayer formater radio : https://catswhocode.com/html5-audio-player/
ce player fait appel a une page php qui lui envoi le nouveau titre a diffuser via ajax.
Dans ce fichier, apres la requete, je creer des cookie avec le nom de l'artiste, le titre, et tout ce que vous voulez...
pour rappel, ce que je voulais faire, c'est que dans la page parent, sur le site hors popup donc, un double de mon player (mais sans son) rafaichisse les informations diffusés dans la popup...
donc, pour cela, j'ai mis en javascript dans le player du site :
donc vous verrez une fonction de reprise de cookie (function getCookie(c_name)) prise sur : https://www.w3schools.com/JS/js_cookies.asp
une fonction pour formater le texte du cookie qui sort comme une urlencode (va savoir pourquoi !) = function urldecode(str)
et voilà,
et là, ca marche !!
merci beaucoup encore a jeremy !
merci beaucoup pour ton aide :)
je vais décrire comment j'ai fait au cas ou si ca peut servir a d'autres !
alors dans un premier temps j'ai une pop up avec le player jPlayer formater radio : https://catswhocode.com/html5-audio-player/
ce player fait appel a une page php qui lui envoi le nouveau titre a diffuser via ajax.
Dans ce fichier, apres la requete, je creer des cookie avec le nom de l'artiste, le titre, et tout ce que vous voulez...
setcookie("radio_artist",$artist,time()+3600, "/"); setcookie("radio_song",$songname,time()+3600, "/"); // $artist et $songname sont les variables généré par la requete de départ...
pour rappel, ce que je voulais faire, c'est que dans la page parent, sur le site hors popup donc, un double de mon player (mais sans son) rafaichisse les informations diffusés dans la popup...
donc, pour cela, j'ai mis en javascript dans le player du site :
<script> function getCookie(c_name) { var c_value = document.cookie; var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1) { c_start = c_value.indexOf(c_name + "="); } if (c_start == -1) { c_value = null; } else { c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1) { c_end = c_value.length; } c_value = unescape(c_value.substring(c_start,c_end)); } return c_value; } function urldecode(str) { return decodeURIComponent((str+'').replace(/\+/g, '%20')); } var interval = 3000; CookieFct = setInterval(function () { var song=getCookie("radio_song"); var artiste=getCookie("radio_artist"); //alert(cookie); if (song!='<?Php echo $Song; ?>') { // $Song est la variable repenant l\'ancien cookie //alert(artiste); document.getElementById("ArtisteName").innerHTML =urldecode(artiste); document.getElementById("SongName").innerHTML =urldecode(song); } }, interval); </script>
donc vous verrez une fonction de reprise de cookie (function getCookie(c_name)) prise sur : https://www.w3schools.com/JS/js_cookies.asp
une fonction pour formater le texte du cookie qui sort comme une urlencode (va savoir pourquoi !) = function urldecode(str)
et voilà,
et là, ca marche !!
merci beaucoup encore a jeremy !
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
31 juil. 2013 à 14:13
31 juil. 2013 à 14:13
Par contre ya un truc à savoir quand même sur ajax quand on l'utilise avec des setInterval :
Faut faire attention à la consommation de ressource, car un appel ajax ca consomme de la ram sur l'ordi de client, donc plus ya d'appel, plus le navigateur va consommer de ram.
Je te dis ca car pour une radio généralement on reste pas juste qq minutes dessus, donc si tu peux limité les appels ca peut être bien. Mais bon si tu mets un setInterval toutes les minutes ca peut allé, et t'as pas de retour de données donc c'est bon ;-)
Faut faire attention à la consommation de ressource, car un appel ajax ca consomme de la ram sur l'ordi de client, donc plus ya d'appel, plus le navigateur va consommer de ram.
Je te dis ca car pour une radio généralement on reste pas juste qq minutes dessus, donc si tu peux limité les appels ca peut être bien. Mais bon si tu mets un setInterval toutes les minutes ca peut allé, et t'as pas de retour de données donc c'est bon ;-)
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
>
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
31 juil. 2013 à 15:14
31 juil. 2013 à 15:14
Ah ok je savais pas trop pour les ressources merci du conseil !
Et effectivement j ai laissé à 3secondes le setinteval j ai pas pensé à le changé.
Je vais le mettre aune minute comme tu me conseilles.
Merci encore :)
Et effectivement j ai laissé à 3secondes le setinteval j ai pas pensé à le changé.
Je vais le mettre aune minute comme tu me conseilles.
Merci encore :)
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
31 juil. 2013 à 15:24
31 juil. 2013 à 15:24
Après ya solution des données push, mais c'est encore un niveau au dessus, et ca nécessite un serveur push.
Les données push c'est le server qui envois les infos au client quand le serveur le veut.
En gros le client écoute le serveur, et quand le serveur envois, il réceptionne.
Les données push c'est le server qui envois les infos au client quand le serveur le veut.
En gros le client écoute le serveur, et quand le serveur envois, il réceptionne.
diice
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
31 juil. 2013 à 15:28
31 juil. 2013 à 15:28
oui effectivement, ca viendra plus tard :)
la je lance la webradio comme ca en aléatoire en attendant que je monte la structure derriere, mais a la finale ca sera surement un truc comme ça :)
en tout cas je note pour plus tard !
c sur ca qu'est basé le streaming ? non ?
la je lance la webradio comme ca en aléatoire en attendant que je monte la structure derriere, mais a la finale ca sera surement un truc comme ça :)
en tout cas je note pour plus tard !
c sur ca qu'est basé le streaming ? non ?
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
31 juil. 2013 à 15:42
31 juil. 2013 à 15:42
Aucune idée par contre ^^