CODEWITHSUNDEEP
javascriptjqueryajax
Miljan Ilic
Miljan Ilic

Reputation: 335

Like Dislike Function AJAX

I have this jQuery AJAX Like Dislike Script

<script>
$(function(){ 
    var PostID = <?php echo $PostID;  ?>; 

    $('.like-btn').click(function(){
        $('.dislike-btn').removeClass('dislike-h');    
        $(this).addClass('like-h');
        $.ajax({
            type:"POST",
            url:"rate.php",
            data:'Action=LIKE&PostID='+PostID,
            success: function(){
            }
        });
    });
    $('.dislike-btn').click(function(){
        $('.like-btn').removeClass('like-h');
        $(this).addClass('dislike-h');
        $.ajax({
            type:"POST",
            url:"rate.php",
            data:'Action=DISLIKE&PostID='+PostID,
            success: function(){
            }
        });
    });
});
</script>

Now I want to transform this script to multi post Like Dislike System. How i can do this? HTML will look like this:

<a href="#" onclick="RateSystem(LIKE, 1)">Like</a>
<a href="#" onclick="RateSystem(DISLIKE, 1)">Dislike</a>

LIKE/DISLIKE will be action, 1 will be ID of post to like/dislike. Thanks

Upvotes: 2

Views: 8918

Answers (2)

Przemysław Madej
Przemysław Madej

Reputation: 56

you can make something like this. Each post it is each div with postId and two controls inside (like and dislike buttons). When you click like - function will get post id and send with post to server. You must to check ajax part of function. 

$(function () {
  $('.like').click(function () { likeFunction(this); });
  $('.dislike').click(function () { dislikeFunction(this);});
});


function likeFunction(caller) {
  var postId = caller.parentElement.getAttribute('postid');
  $.ajax({
      type: "POST",
      url: "rate.php",
      data: 'Action=LIKE&PostID=' + postId,
      success: function () {}
  });
}
function dislikeFunction(caller) {
  var postId = caller.parentElement.getAttribute('postid');
  $.ajax({
      type: "POST",
      url: "rate.php",
      data: 'Action=DISLIKE&PostID=' + postId,
      success: function () {}
  });
}

<div class="post" postid="10">
    <input type="button" class='like' value="LikeButton" /> </input>
    <input type="button" class='dislike' value="DislikeButton"> </input>
</div>

If you have some questions or need more help you can ask me :)

Upvotes: 3

pid
pid

Reputation: 11607

If you want more than one post per page you can do this:

function send(action, id)
{
    var opposite;

    opposite = action === 'like' ? 'dislike' : 'like';

    $('#' + opposite + '-' + id).removeClass(opposite + '-h');
    $('#' + action + '-' + id).addClass(action + '-h');

    $.ajax({
        type:"POST",
        url:"rate.php",
        data:'Action=' + action + '&PostID=' + id,
        success: function(){
        }
    });
}

Now you only need to attach the handlers properly ($PostID must be different for every post in a loop):

<a href="#"
    id="like-<?php echo $PostID; ?>"
    onclick="send('like', <?php echo $PostID; ?>)">Like</a>
<a href="#"
    id="disloke-"<?php echo $PostID; ?>"
    onclick="send('dislike', <?php echo $PostID; ?>)">Dislike</a>

That's just a layout of the code, there may be defects. It's pretty different from where we started, so only you can actually test it and see where it need refinement.

Upvotes: 1

Related Questions