Like system using AJAX, jQuery and PHP

Question

I am trying to make a like/dislike system on the posts of my social networking website with each post having an pid(auto-increment). I run a while loop that fetches the post from database and show it and also give an option to like/dislike below each post. I am not using any input radio or checkbox button, instead I have used an icon for which the colour should change when clicked and also an AJAX function is called using onclick event on the same icon.

The AJAX function should go to a file likes.php where the a search is done for the row having that post id and the likes column of that row is updated or incremented by 1 and then the result is returned by echo. All this should work but not working.

The AJAX function takes post id (pid) as a parameter and pass it to likes.php where likes field corresponding to that post id is incremented. The like icon for each post has been assigned an id = post id so as to select that like button which is clicked and for which the post id is passed in AJAX function. The result is returned to a span element having an id = "like"+ post pid.

My code

index.php - to show posts and like button

$q = $conn->prepare("SELECT * FROM posts ORDER BY pid DESC");
$q->execute();

while($row = $q->fetch(PDO::FETCH_ASSOC)) {
#my post representation using div and all...

#like/dislike button
  <span class=\"right floated\" id=\"like".$row['pid']."\" >
<i id=\"".$row['pid']."\" class=\"heart icon\"       onclick=\"like(".$row['pid'].")\"></i>

     </span>

          }

ajax-function 'a' is a parameter-local variable

<script>
              $(document).ready(function(){
                  function like(a) {
                  $("#"+a).css('color','red');
                    $.ajax({
                     url: "likes.php",
                       data: ({pid: a}),
                   type: "POST",
                     success:function(data){
                       $("#like"+a).html(data);
                       },
                     error:function (){}
                        });
                     }
                    });
                  }
               </script>

likes.php file

                <?php
           session_start();
            include 'db.php';



           $j =$_POST['pid'];

             $sql = "UPDATE posts SET likes = likes +1 WHERE pid ='" . $j . "'";
            $r = $conn->prepare($sql);
           $r->execute();

         $sql = "SELECT * FROM posts WHERE pid ='" . $j . "'"; 
        $r = $conn->prepare($sql);
        $r->execute();
         $ry=$r->fetch();
        if($r)
            {
       echo $ry['likes'];
           }


      ?>

Please tell me why doesn't it work; at least it should detect the icon click using onclick but I think even that's not working. The AJAX function is not getting executed as nothing happens on clicking.

Answer 1

The problem here, that you declare the like function inside the document ready so outside of that scope your function is not defined.

Posible solutions:

• Declare your function before the document ready scope
• Create a var outside of document ready
• Use jQuery .click (or .on('click',) instead of the onClick html property to call your function

Declare your function before the document ready scope

script:

function like(a) {
    $("#" + a).css('color','red');
    $.ajax({
        url: "likes.php",
        data: {pid: a},
        type: "POST",
        success:function(data){
            $("#like" + a).html(data);
        },
        error:function (){}
    });
}

Create a var outside of document ready

var like;
$(document).ready(function(){
    like = function(a) {
        $("#" + a).css('color','red');
        $.ajax({
            url: "likes.php",
            data: {pid: a},
            type: "POST",
            success:function(data){
                $("#like"+a).html(data);
            },
            error:function (){}
        });
    }
});

(This can cause some problem, because until the document is not ready this function not gonna work)

Use jQuery .click (or .on('click',) instead of the onClick html property to call your function

index.php

<span class=\"right floated\" id=\"like".$row['pid']."\" >
    <i id=\"".$row['pid']."\" class=\"heart icon action-like\"></i>
</span>

script

$('.action-like').on('click', function(){
    var pid = $(this).attr('id');

    $("#" + pid).css('color','red');
    $.ajax({
        url: "likes.php",
        data: {pid: pid},
        type: "POST",
        success:function(data){
            $("#like" + a).html(data);
        },
        error:function (){}
    });
});

This should work. But use mysqli instead mysql and do not pass parameters to a query like you do (read about sql injection). And do not echo long static strings instead close php tag and open when needed to echo out a dynamic data.