每个评论都显示不喜欢的内容？ （Codeigniter和Ajax）

Question

I am implementing a photos management system using codeigniter. I am stuck on the below problem

I have a page which consists of comments made by different people on a particular photo. Other people can like those comments.

HTML View:

<div class="container"> 
    <?php foreach($comments as $comment):?>
    <div class="row" style="margin-bottom:0">
        <div class="col-sm-4 col-xs-12 comment">
            <p><?php echo ucfirst($comment['username'])?> says</p>
            <p class="content"><?=$comment['comment']?></p>
            <p>on <?=$comment['date_time']?></p>
            <!-- above display info about the comment -->
        </div>

    </div>

    <!-- likes --> 
    <div class="row" style="margin-top:0">
        <input hidden="" name='comment_id' class="comment_id" name="comment_id" value="<?php echo $comment['id'];?>">
        <input  hidden="" name="user_id" class="user_id" name="user_id" value="<?php echo $this->session->userdata['logged_in']['id']?>">
        <span   class="glyphicon glyphicon-thumbs-up like" style="margin-right: 5px;cursor: pointer"></span><span class="like-count" style="margin-right: 15px"></span>


    </div>


    <?php endforeach;?>

</div>

I need to display total likes made by each person on a particular comment. (For example in facebook we see there are 90 likes and so on..)

jQuery: This is my ajax call which is also in the same view.

$(function(){ //Document is now ready
    $(".like").each(function(){
        var comment_id=$(this).siblings(".comment_id").val(); //Getting comment id

        $.ajax({
           method:"POST",
           url:"<?php echo site_url('viewer/display_likes_count');?>",
           data:"comment_id="+comment_id,
           success:function(data){          
               $(".like-count").html(data); //updating total counts
           }
       });
    });
}); 

Controller:

 public function display_likes_count(){
        $comment_id=  $this->input->post("comment_id");
        $result=  $this->Viewer_model->count_likes($comment_id);
        echo $result['likes_count'];

    }

Model:

 public function count_likes($comment_id){
         $this->db->select("COUNT(*) AS likes_count");
         $this->db->from("likes");
         $this->db->where("comment_id", $comment_id);
        $result= $this->db->get();  
        return $result->row_array();
    }

When I load a particular photo all the comments hold 0 total likes, but actually there are different numbers of likes in the db for each comment

Note - I did alert data in my success function. Then results that I wanted get alerted properly, but when I update "like-count" span it says 0. Why is that. am not I selecting the elemnts properly using jQuery.

I tried $(this).siblings(".like-count").html(data); but still the result for all the comments is 0.

Please show me where I have gone wrong ?

Answer 1

Edit: You tried $(this).siblings(".like-count").html(data);. This should work if you used the self variable instead of this like I did in my code below.

$(".like-count").html(data);

This line will update all the like-counts on the page with data. So probably the last iteration of your FOR loop has 0 likes, which then got updated on all rows.

Try this:

$(function(){ //Document is now ready
    $(".like-count").each(function(){
        var comment_id=$(this).siblings(".comment_id").val(); //Getting comment id
        var self = $(this);
        $.ajax({
           method:"POST",
           url:"<?php echo site_url('viewer/display_likes_count');?>",
           data:"comment_id="+comment_id,
           success:function(data){          
               $(self).html(data); //updating total counts
           }
       });
    });
}); 

Instead of looping over the .like class, we'll do it over .like-count. Then we can set the HTML for that element to be equal to the number of likes.