CODEWITHSUNDEEP
jqueryajax
user1805445
user1805445

Reputation: 159

.class button on click

i have a div with multiple like buttons and i have the following code where when a user press on one of the like buttons it returns the data-catid value.

$('.likes').click(function(){
            var catid;
            catid = $(this).attr("data-catid");
             $.get('/rmb/like_image/', {like_id: catid}, function(data){
                       $('.likes').html(data);
                       $('.likes').attr('disabled','disabled');
                   });
        });

My problem is instead of returning it to the only button that was pressed , its returning the value to all buttons. I know it has something to do with this line

$('.likes').html(data);

but i am not sure how to fix it.

Any suggestions? Thanks

Upvotes: 0

Views: 114

Answers (3)

Soronbe
Soronbe

Reputation: 926

$('.likes').click(function(){
        var catid;
        thatVar = $(this);
        catid = $(this).attr("data-catid");            
        $.get('/rmb/like_image/', {like_id: catid}, function(data){
                   thatVar.html(data);
                   thatVar.attr('disabled','disabled');
               });
    });

Could you try if this works?

Upvotes: 0

tech-gayan
tech-gayan

Reputation: 1413

Just update only the current element.

$('.likes').click(function () {
var self = $(this);
    var catid = self.attr("data-catid");
$.get('/rmb/like_image/', {
    like_id: catid
  }, function (data) {
    self.html(data).prop('disabled', true);
  });
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You need to update the current clicked element, so use a closure variable to store the reference to the clicked element then use that reference on the ajax callback.

$('.likes').click(function () {
    var $this = $(this),
        catid = $this.attr("data-catid");
    $.get('/rmb/like_image/', {
        like_id: catid
    }, function (data) {
        $this.html(data).prop('disabled', true);
    });
});

Upvotes: 1

Related Questions