Actualiser un div avec cookie et jquery ajax

[Résolu/Fermé]
Signaler
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
-
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
-
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

Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
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 !
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
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 :)
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
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 :)
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
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...
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
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
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
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 ...
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
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é !
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
Ca marche pas de problème :) Je suis là demain si jamais !
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
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 !
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1 >
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013

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 :)
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
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.
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1
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 ?
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
76
Aucune idée par contre ^^
Messages postés
131
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
25 février 2017
1 >
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013

Je verrai tout ça plus tard ;-)
Merci encore beaucoup pour ton aide vraiment ! Et bonne journée à toi ;-)