AJAX不更新类

Question

I have a simple HTML table with a column showing a Yes/No option- when a user changes the Yes to No or vice versa it calls a PHP script via AJAX which updates the record in the database. This is all working well, but I would now like it to add a class to the parent for the radio button that was clicked if the PHP script was successful or not.

Here's how the table looks like:

<table>
<thead>
<tr>
    <th scope="col">Description</th>
    <th scope="col">Type</th>
    <th scope="col">Completed</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Welcome Email</td>
    <td>Email</td>
    <td class="">
        <div class="radio" id="radio1">
            <label><input checked id="1" name="completed1" type="radio" value="Yes">Yes</label>
            <label><input id="1" name="completed1" type="radio" value="No">No</label>
        </div>
    </td>
</tr>
<tr>
    <td>Follow Up Phone Call</td>
    <td>Phone call</td>
    <td class="">
        <div class="radio" id="radio2">
            <label><input id="2" name="completed2" type="radio" value="Yes">Yes</label>
            <label><input checked id="2" name="completed2" type="radio" value="No">No</label>
        </div>
    </td>
</tr>
</tbody>

Here's my script - it's calling the PHP page which updates the database successfully but it's not adding the class to the radio button div:

$(document).ready(function() {
    $("input[type='radio']").change(function(){
        var recid = $(this).closest('div').attr('id');
        var completed = $(this).val();
        $.post('updateTask.php', { type: 'updateTask', recid: recid, completed: completed }, function(data) {
        data = JSON.parse(data);
            if (data.error) {
                $(this).closest('div').attr('id').addClass("has-error");
                $("#ajaxAlert").addClass("alert alert-danger").html(data.text);
                $("#ajaxAlert").show();
                return; // stop executing this function any further
            } else { 
                $(this).closest('div').attr('id').addClass("has-success");
                $(this).closest('div').attr('id').removeClass("has-error");
                // if you want to show a success alert enable the following
                // $("#ajaxAlert").addClass("alert alert-success").html(data.text);
                $("#ajaxAlert").hide();
            }

        }).fail(function (xhr) {
            // no data available in this context
            $(this).closest('div').addClass("has-error");
            $("#ajaxAlert").addClass("alert alert-danger");
            //display AJAX error details
            $("#ajaxAlert").html(xhr.responseText);
            $("#ajaxAlert").show();
        });
     }); 
});

I wasn't sure how to target the DIV to add the class to - I would typically do something like:

$("#storeManagerRow").addClass("success");

but in this case I have up to 20 radio button cells on the page so having trouble working out the syntax for the parent for the radio button DIV that was clicked to update the class.

Answer 1

The statement will be invalid because of its scope:

$(this).closest('div').addClass("has-error");

Workaround:

$(document).ready(function() {
  $("input[type='radio']").change(function(){
    var recid = $(this).closest('div').attr('id');
    var completed = $(this).val();
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateTask.php', { type: 'updateTask', recid: recid, completed: completed }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        // $(this) is wrong here. It refers to the AJAX Object.
        $this.closest('div').attr('id').addClass("has-error");
        $("#ajaxAlert").addClass("alert alert-danger").html(data.text);
        $("#ajaxAlert").show();
        return; // stop executing this function any further
      } else { 
        $this.closest('div').attr('id').addClass("has-success");
        $this.closest('div').attr('id').removeClass("has-error");
        // if you want to show a success alert enable the following
        // $("#ajaxAlert").addClass("alert alert-success").html(data.text);
        $("#ajaxAlert").hide();
      }

    }).fail(function (xhr) {
      // no data available in this context
      // $(this) is wrong here. It refers to the AJAX Object.
      $this.closest('div').addClass("has-error");
      $("#ajaxAlert").addClass("alert alert-danger");
      //display AJAX error details
      $("#ajaxAlert").html(xhr.responseText);
      $("#ajaxAlert").show();
    });
  }); 
});