Jquery ajax like and dislike button

Question

Guys am trying to create like and dislike button like on fb. I have list of posts which I list looping in PHP. I just want one button if liked set Blue color, if is not liked set normal (default) color. All likes records are stored in db id | account_id | item_id | etc..

I have one php controller for likes which holds 2 main methods addAction() and deleteAction() . First and second action only accept ajax request and add and delete records in database.

So my problem is when I click on that one button color is not changed when ajax finishes (success and complete). I think I do that fine but in wrong way. When I click on Like record is saved but live color changed. I also try with Jquery load() but I only can load all posts and after setInterval he returns me on the top of post list :/

Here is my jquery for this:

// Submit post like
submitPostLike: function() {

    var likes = 0;
    var likeBtn = $(".like-btn");

    likeBtn.click(function() {

         var postId = $(this).attr("rel");

        $.ajax({
             type: "post",
             cache: false,
             url: baseurl + "/like/addAction",
             data: {
                 item_id: postId,
             },
             success: function(response) {
                 console.log("post liked -" + postId); // debug
             },
            complete: function() {
                $(".like-txt").css("color", "blue");
                setTimeout(Post.updatePostList(), 1000);
                console.log("scheduler fired"); // debug
            },
             error: function(response, s, e) {
                alert(response.responseText);
             },
         });
     })
},

Delete Action is the some I don't put it.

Html which is created over looping in php

<?php if(hasLiked($post->post_id, $acc_id)): ?>
     <button type="button" id="post_like_btn" rel="<?= $post->post_id;?>" class="dislike-btn btn btn-xs btn-default">
     <div class="like-txt"><i class="glyphicon glyphicon-thumbs-up"></i> Like </div>
     </button>
<?php else : ?>
   <button type="button" id="post_dislike_btn" rel="<?= $post->post_id;?>" class="like-btn btn btn-xs btn-default">
  <i class="like glyphicon glyphicon-thumbs-up"></i> Dislike
  </button>
<?php endif; ?>

hasLiked() is php function with checking if that post already liked by this account. If account's like exists in db show dislike button.

Now how live refresh like with load() function when someone like post? All this works but like text is blue only when I refresh page.

dotdeb · Accepted Answer · 2015-12-30 11:33:48Z

2

The HTML is being processed on the server side and served to the client. If hasLiked returns false, the div with class like-txt will not be present in the HTML served. Hence, when you try to access it in the complete method of the Ajax call, nothing happens. You would need to make the element present in the Dom, whether the value returned by hasLiked is false or not. You can keep it hidden, but it needs to be part of the Dom.

answered Dec 30, 2015 at 11:33

dotdeb

1,17312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery ajax like and dislike button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related