CODEWITHSUNDEEP
javascriptjqueryhtmlajax
tomsk
tomsk

Reputation: 997

Cannot add class to clicked element

I have code for adding products into favorites using JQuery and AJAX, my JavaScript code looks like:

$('.product-item-btn-fav').on('click', function(e){
    b = $(this).data("product_number");
    $.ajax({
        type: "POST",
        url: domain + "/ajax/favorite/" + b,
        success: function (a) {
            var d = parseInt($(a).find("#result").html());
            if (d == 1) {
                $(this).addClass("active");
            } else {
                if (d == -1) {
                    $(this).removeClass("active");
                }
            }
        }
    })
});

And HTML:

<a class="product-item-btn-fav" data-product_number="[%item.product_number%]">
    <svg class="svg-icon-heart-filled">
        <use xlink:href="[%domain.url_media%]/images/svg-sprite.svg#svg-icon-heart-filled"></use>
    </svg>
</a>

This code works, it adds product into favorite list at backend side (so AJAX works and it returns valid result 1 or -1), but this call $(this).addClass("active"); doesn't add css class to <a> tag.

Upvotes: 2

Views: 92

Answers (4)

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

$.ajax({
    type: "POST",
    context : this,
    url: domain + "/ajax/favorite/" + b,
     success: function (a) {
        var d = parseInt($(a).find("#result").html());
        if (d == 1) {
            $(this).addClass("active");
        } else {            
                $(this).removeClass("active");
               }
    }
})

Upvotes: 0

Mamun
Mamun

Reputation: 68923

this does not point the element you are thinking, store this in a variable and use that inside the ajax callback function: 

$('.product-item-btn-fav').on('click', function(e){
  var b = $(this).data("product_number");
  var prod = $(this);
  $.ajax({
    type: "POST",
    url: domain + "/ajax/favorite/" + b,
    success: function (a) {
      var d = parseInt($(a).find("#result").html());
      if (d == 1) {
        prod.addClass("active");
      } else {
          if (d == -1) {
            prod .removeClass("active");
          }
        }
      }
   });
});

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82241

That is because context to anchor element is lost in ajax callback function. You can set the context using context option in ajax. See Ajax Docs:

$.ajax({
    type: "POST",
    context : this,
    url: domain + "/ajax/favorite/" + b,
     success: function (a) {
        var d = parseInt($(a).find("#result").html());
        if (d == 1) {
            $(this).addClass("active");
        } else {
            if (d == -1) {
                $(this).removeClass("active");
            }
        }
    }
})

Upvotes: 3

Devsi Odedra
Devsi Odedra

Reputation: 5322

You have to store $(this) in variable for a

$('.product-item-btn-fav').on('click', function(e){
    b = $(this).data("product_number");
    var _t = $(this);
    $.ajax({
        type: "POST",
        url: domain + "/ajax/favorite/" + b,
        success: function (a) {
            var d = parseInt($(a).find("#result").html());
            if (d == 1) {
                _t.addClass("active");
            } else {
                if (d == -1) {
                    _t.removeClass("active");
                }
            }
        }
    })
});

Upvotes: 4

Related Questions