IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Utilisation Ajax et setInterval [AJAX]


Sujet :

jQuery

  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut Utilisation Ajax et setInterval
    Bonjour à tous,

    Alors voilà, je souhaite récupérer le nombre de like Facebook pour une URL donnée. Le script PHP fonctionne parfaitement. Mais je veux afficher le nombre de like en temps réel, et donc je fais appel à l'Ajax, mais via la librairie jQuery.

    J'ai mis au point un bout de code, mais cela ne fonctionne pas, pourriez-vous m'aider à décrypter le problème ? Apparemment le nombre de like n'est pas rafraichit comme il se doit toutes les 5 secondes.

    Voici mon code

    Index.html

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<title>Titre de la page</title>
    	<link rel="stylesheet" href="style.css">
    	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    	<script src="functions.js"></script>
    </head>
    <body>
    <div id="output"></div>
    </body>
    </html>

    likes.php

    Code php : 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
    <?php
    function get_fb_likes($url){
      $query = "select total_count,like_count,comment_count,share_count,click_count from link_stat where url='{$url}'";
       $call = "https://api.facebook.com/method/fql.query?query=" . rawurlencode($query) . "&format=json";
     
      $ch = curl_init();
       curl_setopt($ch, CURLOPT_URL, $call);
       curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
       $output = curl_exec($ch);
       curl_close($ch);
       return json_decode($output);
    }
     
    $fb_likes = reset( get_fb_likes("http://www.cnn.com") );
    $likes = $fb_likes->like_count;
    echo json_encode($likes);
    /*echo $fb_likes->total_count;
    echo $fb_likes->comment_count;
    echo $fb_likes->share_count;
    echo $fb_likes->click_count;*/
    ?>

    functions.js

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(document).ready(function(){
        function ajax(){
            $.ajax({                                      
                url: 'likes.php',     
                data: "",
                dataType: 'json',    
                success: function(data){
                    var nbLikes = data; 
                    $('#output').html(nbLikes);
                } 
            });
        }
        setInterval(ajax(),5000);
    })(jQuery);
    Un grand merci !

  2. #2
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $fb_likes = reset( get_fb_likes("http://www.cnn.com") );
    $likes = $fb_likes->like_count;

    Jamais utilisé l'API facebook mais selon le code ça doit être un objet json qu'elle semble te renvoyer (du coup ce que contient "output"). Or la fonction reset s'applique sur un tableau, et après tu utilise une notation objet. A mon avis y a quelque chose à faire de ce côté là...

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Déjà :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval("ajax()",5000);

    C'est la pire façon de faire un setInterval()...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval(ajax,5000);
    est beaucoup plus propre.

    Sinon, les requêtes sont par défaut en GET, tu es donc confronté à un problème manifeste de cache : ton script récupère toujours le résultat en cache, donc pas la valeur actualisée.
    L'idéal est de passer en POST ou d'utiliser le paramètre cache avec la valeur false.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Si jet mets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval(ajax,5000);
    , ca ne fonctionne pas, si je mets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval(ajax(),5000);
    , là ca fonctionne.

    Donc pour le moment j'ai ceci :

    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
     
    $(document).ready(function(){
     
        function ajax(){
            $.ajax({                                      
                url: 'likes.php',     
                data: "",
                cache: false,
                dataType: 'json',    
                success: function(data)
                {
                    var nbLikes = data; 
                    $('#output').html(nbLikes);
                } 
            });
        }
     
        setInterval(ajax(),5000);
     
    });
    Mais même avec le cache à false, ça ne fonctionne pas... Pour passer en POST, je fais comment ?

  5. #5
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $.ajax({
         type: 'POST',
            .....

  6. #6
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Merci j'ai testé, mais cela ne fonctionne toujours pas, j'attends 5 min et toujours pas d'actualisation...

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval(ajax(),5000);
    Ben là, c'est sûr que tu vas pas arriver à grand chose...
    Les fonctions de rappel (callback) ou les utilisations cachées de eval()
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Il faut que tu debug ce que contient exactement le retour de l'appel à l'API facebook (le resultat de curl_exec). Je suis complètement sceptique sur l'utilisation des objets et de fonctions d'encodage et décodage json comme ça au ptit bonheur la chance, j'ai vraiment l'impression que tu les utilises à l'aveugle ici.

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, c'est tout à fait probable...

    D'ailleurs, la fonction ajax() est codée dans le même esprit...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    dataType: 'json',    
    success: function(data){
        var nbLikes = data; 
        $('#output').html(nbLikes);
    }
    Si tu dis que tu es supposé recevoir un résultat JSON, tu ne peux pas l'intégrer tel quel dans la page dans le callback success...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Je comprends pas, si je retirer les parenthèses, cela ne m'affiche plus rien...

    Citation Envoyé par Bovino
    Si tu dis que tu es supposé recevoir un résultat JSON, tu ne peux pas l'intégrer tel quel dans la page dans le callback success...
    N'étant pas très au point avec l'ajax, vous me préconisez quoi ? Parce que là je suis perdu...
    Merci de votre aide en tout les cas.

  11. #11
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Appel ton fichier php sans ajax dans un premier temps et debug ton script pour voir s'afficher vraiment le nombre de likes (en gros assure toi que ton script php fonctionne correctement). Ensuite seulement quand tu seras sûr de son bon fonctionnement, tu l’intégreras sur ta page avec de l'ajax.

  12. #12
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    J'ai testé sans l'ajax ca fonctionne et m'affiche correctement le nombre de likes, en vérifiant sur la page Facebook correspondante. Ici le seul problème, c'est que l'Ajax ne met pas à jour le chiffre sauf si je rafraîchi la page, ce qui n'est pas le but...

  13. #13
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Bien, dans ce cas là, qu'est ce qui est exactement affiché à l'écran ? Juste le nombre ? Ou un objet Json ?

  14. #14
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Comment le savoir ? :/

  15. #15
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    J'ai testé sans l'ajax ca fonctionne et m'affiche correctement le nombre de likes
    Qu'est ce qui est affiché à l'écran quand tu fais ca ?

  16. #16
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Citation Envoyé par Spartacusply Voir le message
    Qu'est ce qui est affiché à l'écran quand tu fais ca ?
    Juste le nombre, j'ai l'impression que c'est mon setInterval qui fonctionne pas...

  17. #17
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    J'ai trouvé la solution, ca venait bien du set interval

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
        setInterval(function(){
     ajax()
    },5000);
    Mais bizarrement lors du premier affichage cela mets 3-4 secondes avant de s'afficher, après ca se rafraichit automatiquement.
    Quelque chose à faire pour ce retard de 3 sec ?

  18. #18
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    si je mets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval(ajax(),5000);
    , là ca fonctionne.
    si je retirer les parenthèses, cela ne m'affiche plus rien
    Faut savoir...

    Sinon, j'imagine que tu n'utilises pas de console de développement ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  19. #19
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Faut savoir...

    Sinon, j'imagine que tu n'utilises pas de console de développement ?
    Bah si mais aucune erreur dans la console...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Utilisation Ajax pour Domino
    Par Guega dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/08/2008, 14h26
  2. Réponses: 6
    Dernier message: 18/01/2008, 17h12
  3. utiliser ajax dans un générateur
    Par cortex024 dans le forum ASP.NET
    Réponses: 1
    Dernier message: 05/06/2007, 16h27
  4. [PHP-JS] Creer un Treeview qui utilise AJAX et PHP
    Par bambou dans le forum Langage
    Réponses: 10
    Dernier message: 19/09/2006, 15h11
  5. [AJAX] Comment utiliser AJAX
    Par Taz_8626 dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 06/04/2006, 15h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo