Adding class inside AJAX .done function

Question

I wrote small script to adding class where .done function is called, but this solution doesn't work.

$("#test").on("click", function() {

  var test = "foo bar";

  $.post({
    type: "POST",
    url: "test.php",
    data: {
      test: test
    }
  }).done(function() {
    $(this).parent().parent().addClass("success");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#" id="test">click me</a></td>
  </tr>
</table>

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this — enno.void, Dec 20 '17 at 12:11
yes - why not just give the table-tag, I presume, and id and then find it instead of `parent().parent()` — Lasse, Dec 20 '17 at 12:13

Zakaria Acharki · Accepted Answer · 2017-12-20T12:32:55.077

1

this inside the callback is not the same outside it refers to the jqXHR object of the ajax request not the element that the event handler was bound to, you should save it first outside, then use it as variable like :

$("#test").on("click", function() {
  var _this = $(this);
  var test = "foo bar";

  $.post({
    type: "POST",
    url: "test.php",
    data: {
      test: test
    }
  }).done(function() {
    _this.parent().parent().addClass("success");
  });

});

edited Dec 20 '17 at 12:32

answered Dec 20 '17 at 12:14

Zakaria Acharki

66,747
15
75
101

not defined _this in answer – zabusa Dec 20 '17 at 12:14
we also can do a .bind(this) right to done callback – zabusa Dec 20 '17 at 12:16
No need for bind in this case for the proper way... – Zakaria Acharki Dec 20 '17 at 12:17
bind also work right – zabusa Dec 20 '17 at 12:17
Yes should work.. – Zakaria Acharki Dec 20 '17 at 12:20

score 0 · Answer 2 · answered Dec 20 '17 at 12:17

Here is way to use this inside Ajax call. First store Node inside that variable and use that variable instead of this. I m using GET request for example , but it will work on POST request as well.

$("#test").on("click",function(){
       var that = $(this);
        var postData ={};
        $.ajax({
       type:"GET",
       url: "https://ipinfo.io/json",//your url
          data:postData,
          success: function (msg) {
                   
             },
          error:function (xhr, ajaxOptions, thrownError){
     console.log("error occured  : " +thrownError)
           } 
        }).done(function() {
    $(that).parent().parent().addClass("success");
  });;
})

.success{
background-color : #fc0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#" id="test">click me</a></td>
  </tr>
</table>

Adding class inside AJAX .done function

2 Answers2