1

Привет нашел в интернете классную вещь, которую хочу поставить для своего простенького самописного сайта. Система рейтинга лайков дизлайков. Не все работают без перезагрузки страницы.

А именно данные в правой части обновляются только после перезагрузки страницы. Мои знания в языках мизирные, поэтому без помощи мне не разобраться. Нужно, чтоб все показывалось без перезагрузки страницы

введите сюда описание изображения Вот сайт на котором есть данный код:

 <head>
    <meta charset="utf-8" />
    <title>Youtube Like & Dislike System</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    </head>

    <body>
    <?php
    include 'config.php';
    $user_ip = $_SERVER['REMOTE_ADDR'];
    $pageID = '1'; // The ID of the page, the article or the video ...

    //function to calculate the percent
    function percent($num_amount, $num_total) {
        $count1 = $num_amount / $num_total;
        $count2 = $count1 * 100;
        $count = number_format($count2, 0);
        return $count;
    }

    // check if the user has already clicked on the unlike (rate = 2) or the like (rate = 1)
    $dislike_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 2 ');
    $dislike_count = mysql_result($dislike_sql, 0); 

    $like_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 1 ');
    $like_count = mysql_result($like_sql, 0);  

    // count all the rate 
    $rate_all_count = mysql_query('SELECT COUNT(*) FROM  rating WHERE id_item = "'.$pageID.'"');
    $rate_all_count = mysql_result($rate_all_count, 0);  

    $rate_like_count = mysql_query('SELECT COUNT(*) FROM  rating WHERE id_item = "'.$pageID.'" and rate = 1');
    $rate_like_count = mysql_result($rate_like_count, 0);  
    $rate_like_percent = percent($rate_like_count, $rate_all_count);

    $rate_dislike_count = mysql_query('SELECT COUNT(*) FROM  rating WHERE id_item = "'.$pageID.'" and rate = 2');
    $rate_dislike_count = mysql_result($rate_dislike_count, 0);  
    $rate_dislike_percent = percent($rate_dislike_count, $rate_all_count);
    ?>

    <script>
    $(document).ready(function() {
        var pageID = <?= $pageID;  ?>; 


        $(document).on('click', '.like-btn', function(){    

        $('.dislike-btn').removeClass('dislike-h');    
            $(this).addClass('like-h');
                $.ajax({
                    type:"POST",
                    url:"ajax.php",
                    data:'act=like&pageID='+pageID,
                    success: function(){
                    }
                });
            });


        $(document).on('click', '.dislike-btn', function(){ 

        $('.like-btn').removeClass('like-h');
             $(this).addClass('dislike-h');
                $.ajax({
                    type:"POST",
                    url:"ajax.php",
                    data:'act=dislike&pageID='+pageID,
                    success: function(){
                    }
                });
            });

        }); 
    </script>



    <div class="tab-cnt">        
    <h1>Youtube Like & Dislike System With PHP, jQuery & Ajax</h1>
        <div class="tab-tr" id="t1">
            <div class="like-btn <?php if($like_count == 1){ echo 'like-h';} ?>">Like</div>
            <div class="dislike-btn <?php if($dislike_count == 1){ echo 'dislike-h';} ?>"></div>

            <div class="stat-cnt">
                <div class="rate-count"><?php echo $rate_all_count; ?></div>
                 <div class="stat-bar">
                    <div class="bg-green" style="width:<?php echo $rate_like_percent; ?>%;"></div>
                    <div class="bg-red" style="width:<?php echo $rate_dislike_percent; ?>%"></div>
                  </div>
                    <div class="dislike-count"><?php echo $rate_dislike_count; ?></div>
                    <div class="like-count"><?php echo $rate_like_count; ?></div>
            </div>            
        </div>

    </div>
    </body>
    </html>



    <?php
    include 'config.php';
    extract($_POST);
    $user_ip = $_SERVER['REMOTE_ADDR'];

    // check if the user has already clicked on the unlike (rate = 2) or the like (rate = 1)
    $dislike_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 2 ');
    $dislike_count = mysql_result($dislike_sql, 0); 

    $like_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 1 ');
    $like_count = mysql_result($like_sql, 0); 

    if($act == 'like'): //if the user click on "like"
        if(($like_count == 0) && ($dislike_count == 0)){
            mysql_query('INSERT INTO rating (id_item, ip, rate )VALUES("'.$pageID.'", "'.$user_ip.'", "1")');
        }
        if($dislike_count == 1){
            mysql_query('UPDATE rating SET rate = 1 WHERE id_item = '.$pageID.' and ip ="'.$user_ip.'"');
        }
    endif;

    if($act == 'dislike'): //if the user click on "like"
        if(($like_count == 0) && ($dislike_count == 0)){
            mysql_query('INSERT INTO rating (id_item, ip, rate )VALUES("'.$pageID.'", "'.$user_ip.'", "2")');
        }
        if($like_count == 1){
            mysql_query('UPDATE rating SET rate = 2 WHERE id_item = '.$pageID.' and ip ="'.$user_ip.'"');
        }
    endif;
    ?>
1
  • Сделай еще один селект и выведи его в ajax.php. Смотри, чтобы в файле больше ничего не выводилось. Далее в success прими данные в функцию и дальше по пришедешему результату обновляй нужное поле(лайк, дизлайк, общее) Commented 14 мая 2018 в 18:18

1 ответ 1

1

Можешь выводить количество лайков и дизов в отдельные js-переменные, потом из менять при лайке или дизе и отображать новые значения на странице.

Вот пример кода:

<script>
    $(document).ready(function() {
      var pageID = <?= $pageID;  ?>; 

      var rateAllCount = <?= $rate_all_count;  ?>;
      var rateLikeCount = <?= $rate_like_count;  ?>;
      var rateDislikeCount = <?= $rate_dislike_count;  ?>;

      function updateRates() {
        $('.rate-count').text(rateAllCount);
        $('.like-count').text(rateLikeCount);
        $('.dislike-count').text(rateDislikeCount);
      }

      $(document).on('click', '.like-btn', function() {    
        $.ajax({
          type:"POST",
          url:"ajax.php",
          data:'act=like&pageID='+pageID,
          success: function() {
            $(this).addClass('like-h');
            rateLikeCount++;
            if ($('.dislike-btn').hasClass('dislike-h')) {
              $('.dislike-btn').removeClass('dislike-h');
              rateDislikeCount--;
            } else {
              rateAllCount++;
            }
            updateRates();
          }
        });
      });

      $(document).on('click', '.dislike-btn', function(){ 
        $.ajax({
          type:"POST",
          url:"ajax.php",
          data:'act=dislike&pageID='+pageID,
          success: function() {
            $(this).addClass('dislike-h');
            rateDislikeCount++;
            if ($('.like-btn').hasClass('like-h')) {
              $('.like-btn').removeClass('like-h');
              rateLikeCount--;
            } else {
              rateAllCount++;
            }
            updateRates();
          }
        });
      });

    }); 
</script>
1
  • спасибо за такое описание, но все же получается, что сколько раз мы нажимаем на лайк, столько счетчик и показывает, а хотелось бы чтоб, лайк или дислайк прибавлялись от одного человека один раз. А здесь получается сколько нажимаешь, столько и прибавляется Commented 15 мая 2018 в 17:43

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.