Question

im creating a like system but i have ran into a problem, with when the user presses like the “like” text should change to “remove like”

the data comes from a php query so theres many items with same class

<table class="UserHistoryTable">
<td data-rowtype="stat" data-rowuser="1" data-rowid="1" class="UserHistoryTableTD">
<a href="#" class="like">Like</a></td>
</table>

data-rowuser is the id of the user pressing the like button, data-rowid is the id of the activity
what i wanna do is, when someone presses the “like” link, it should change to “Remove like”
i have tried with this code:

$('.like').click(function(){
var the_id = $(this).parent().data('rowid')
var user_id = $(this).parent().data('rowuser')
var user_id = $(this).parent().data('rowtype')
   $.ajax({
      url: "like.php",
      data: "action=likestat" + "&id=" + the_id + "&uid=" + user_id,
         success:function(response){
            var findtext = $('.UserHistoryTableTD > .like', this);
            $(findtext).replaceWith("Remove like");
       }
   });
});

Answer 1

You have a couple problems. this won’t still be the same value as you want in the success handler (it will have a different value related to the ajax call). And the > selector means direct child and .like is not a direct child of the parent table. If you save the value of this in a local variable, you can just use it directly in the ajax handler.

Change the code to this:

$('.like').click(function(){
    var the_id = $(this).parent().data('rowid')
    var user_id = $(this).parent().data('rowuser')
    var self = this;  // save for use in success handler
    $.ajax({
        url: "like.php",
        data: "action=likestat" + "&id=" + the_id + "&uid=" + user_id,
        success:function(response){
            $(self).html("Remove like");
       }
   });
});

You could also DRY it up a bit like this:

$('.like').click(function(){
    var $self = $(this);              // save this for use later
    var $td = $self.closest("td");    // find correct parent, regardless of other markup
    $.ajax({
        url: "like.php",
        data: "action=likestat" + "&id=" + $td.data('rowid') + "&uid=" + $td.data('rowuser'),
        success:function(response){
            $self.html("Remove like");
       }
   });
});