Passer variable php dans javascript : Récupérer en js valeur du compteur nombre de lectures

Version imprimable

Bonjour,
Dans ma liste de news, j'éssaie de mettre des indicateurs de nombre de vues(lectures), de commentaires et de partages.
En m'inspirant du http://www.lefigaro.fr , je voudrais que le nombre et l'icône de lectures passent en rouge dès qu'ils dépassent disons 50 vues.
Dans ma table "news" , il y a un champ libéllé "lectures" qui correspond au nombre de vues pour chaque news.
Il est de type int(6) et prend des valeurs de 1 à 100.

Mais au vu de mes codes , le nombre de lecture et l'icône restent invariablement rouges .

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="counters_<?php echo $donnee['id'];?>" class="counters" >
    <div class="icon-views" alt="nombre de lectures" title="Lectures"><i class="fa fa-eye"></i></div>
    <div class="count-views" alt="nombre de lectures" title="Lectures">
        <?php
            $id=$donnee['id'];
            $retour_count = mysql_query( "SELECT COUNT(*) AS nbre_vues FROM news WHERE id='" . $id ."' ");
            $donnees_count = mysql_fetch_assoc($retour_count);
            if ($donnees_count['nbre_vues'] == 0){
                mysql_query("INSERT INTO news(lectures) VALUES 1");
                echo "1";
 
            } else {
                $retour = mysql_query("SELECT lectures FROM news WHERE id='" . $id ."' ");
                $donnees = mysql_fetch_assoc($retour);
                $lectures = $donnees['lectures'] + 1;
                mysql_query("UPDATE news SET lectures = lectures + 1 WHERE id='" . $id ."' ");
                echo $lectures;
            }
        ?>
    </div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var highlighted=<?php echo $lectures ?>,
        kounter = document.getElementsByClassName("count-views"),
        ikon = document.getElementsByClassName("icon-views");
 
    if(highlighted > 50){
        $(kounter).css("color","#f00"); 
        $(ikon).css("color","#f00");
    }else {
        $(kounter).css("color","#999");
        $(ikon).css("color","#999");
    }
</script>

En faisant un echo gettype($lectures) j'ai bien 'integer'.
Personnellement, je pense que la var highlighted n'est pas de type numeric (ou integer) pour être comparée avec $lectures.
Quelqu'un aimerait-il me montrer où ça cloche ?
Merci d'avance.

Bonjour,

Et tout jQuery, cela ne fonctionne pas ?

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function () {
    $('.counters').each(function () {
        var $counters = $(this);
        if (parseInt($counters.find('.count-views').text(), 10) > 50) {
            $counters.find('div').css("color", "#f00");
        } else {
            $counters.find('div').css("color", "#999");
        }
    });
});

micetf

21/02/2016, 10h18
NoSmoking

Bonjour,
je ne comprend pas pourquoi tu ne traites pas cela à la source, coté serveur en ajoutant une classe par exemple, plutôt que de rajouter une couche coté client !?!

tu peux resoudre ca dans ton PHP directment

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="counters_<?php echo $donnee['id'];?>" class="counters" >
 
        <?php
            $id=$donnee['id'];
            $kounter="#999";
 
            $lectures=1;
            $retour_count = mysql_query( "SELECT COUNT(*) AS nbre_vues FROM news WHERE id='" . $id ."' ");
            $donnees_count = mysql_fetch_assoc($retour_count);
            if ($donnees_count['nbre_vues'] == 0){
                mysql_query("INSERT INTO news(lectures) VALUES 1");
 
 
            } else {
                $retour = mysql_query("SELECT lectures FROM news WHERE id='" . $id ."' ");
                $donnees = mysql_fetch_assoc($retour);
                $lectures = $donnees['lectures'] + 1;
                mysql_query("UPDATE news SET lectures = lectures + 1 WHERE id='" . $id ."' ");
 
            }
            if($lectures > 50){
                  $kounter="#f00"); 
 
           } 
        ?>
     <div class="icon-views" alt="nombre de lectures" title="Lectures" style="color<?php  echo $kounter; ?>"><i class="fa fa-eye"></i></div>
    <div class="count-views" alt="nombre de lectures" title="Lectures" style="color<?php  echo $kounter; ?>">
   <?php echo $lectures ?>
    </div>
</div>

Sinon si tu tiens et que tu doute que c est le fait que ta variable lecture n est pas passee comme entier tu peux la caster

Code:

1
2
3
4
5
 
<script>
    var highlighted=<?php echo $lectures ?>/1||1,
        ......
</script>

22/02/2016, 12h22
amdawb

C'est vrai que traiter ça coté serveur est plus adéquat.
Ça marche pour moi aussi bien en php qu'en js. Merci les gars.
22/02/2016, 16h10
NoSmoking

Citation:

Envoyé par Lakhdr

style="color<?php echo $kounter; ?>"

passer par une class sur le conteneur principal me parait plus propre mais enfin le principal est que cela fonctionne !