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

voilà mon souci :
Je monte un site genre webradio avec playlist aléatoire.
pour que les visiteurs puissent écouter en naviguant sur le site, je lance le player son dans un popup.
(pour info le player son est celui là : https://catswhocode.com/html5-audio-player/

a chaque changement de titre, j'enregistre les informations (titre, artiste...) dans des cookies.
pas de souci pour les reprendre sur mon site, mais du coup les informations, sur le site, ne s'actualisent qu'au rafraichissement ou au changement de page.

mon souci, c'est que j'aimerai que le div ou doivent s'afficher ses infos s'actualise toutes les x minutes sans rafraichir la page.

je ne vois absolument pas comment faire vu que je ne maitrise absoument pas l'ajax.
auriez vous une idée ???

merci d'avance,



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
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 !
1
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
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 !
0
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
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 :)
0
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
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 :)
0

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
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...
0
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
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
0
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
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 ?
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 ...
0
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
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é !
0
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
Ca marche pas de problème :) Je suis là demain si jamais !
0
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
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...
 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 !
0
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
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 ;-)
0
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
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 :)
0
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
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.
0
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
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 ?
0
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
Aucune idée par contre ^^
0