Updating class of parent element jquery

Question

I am trying to update a selector's parent css class. Here is my code that is a table

<div class="container">
    <table class="table table-hover">
    <tr class="table-default">
        <td><input type="checkbox" id="driver[0]" value="log.example.com"></td>
        <td>log.example.com</td>
    </tr>
    <tr class="table-default">
        <td><input type="checkbox" id="driver[1]" value="api.example1.com"></td>
        <td>api.example1.com</td>
    </tr>
    <tr class="table-default">
        <td><input type="checkbox" id="driver[2]" value="mail.example.com"></td>
        <td>mail.example.com</td>
    </tr>
    </table>
</div>

This is what I am using to check for a boolean condition

$(document).ready(function() {
  $("input[type='checkbox']").click(function(event){
    if($(this).is(':checked')){
      var domain = $(this).val();
      //alert(domain);
      $.getJSON('call.php?submit=submit&domain='+domain, function (data) {
        var result = data.is_vuln;
        console.log(result);
        if(result == "true"){
            console.log("line executed"); // Executes
            $(this).parent().parent().addClass("table-success");
        }
      });
    }
  });
});

I am trying to accomplish that if the bool condition, returned via the json is true , then it should change the row's class to table-success .

But I am having no luck here. Nothing is coming up in console except for true and false returning from the json.

Answer 1

Looks like your this variable in your getJSON function has changed scope. try binding this into your $.getJSON function, like so:

  $.getJSON('call.php?submit=submit&domain='+domain, function (data) {
    var result = data.is_vuln;
    console.log(result);
    if(result == "true"){
        $(this).parent().parent().addClass("table-success");
    }
  }.bind(this));

Answer 2

this scope will change in ajax calling scope. You can set this to a variable and can use that as below:

$(document).ready(function() {
    $("input[type='checkbox']").click(function(event){
        if($(this).is(':checked')){
            var domain = $(this).val();
            var checkEle = $(this);
            $.getJSON('call.php?submit=submit&domain='+domain, function (data) {
                var result = data.is_vuln;
                console.log(result);
                if(result == "true"){
                    console.log("line executed"); // Executes
                    checkEle.parent().parent().addClass("table-success").removeClass("table-default");
                }
           });
        }
   });
});

Hope it helps you.