Utilisation Ajax et setInterval

**vbaguet** · 14/03/2014, 14h38

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 !

**Spartacusply** · 14/03/2014, 14h56

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à...

**Bovino** · 14/03/2014, 15h07

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.

**vbaguet** · 14/03/2014, 15h14

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 ?

**Spartacusply** · 14/03/2014, 15h18

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$.ajax({
     type: 'POST',
        .....

**vbaguet** · 14/03/2014, 15h22

Merci j'ai testé, mais cela ne fonctionne toujours pas, j'attends 5 min et toujours pas d'actualisation...

Utilisation Ajax et setInterval [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager