How to change the icon depending on the server response using ajax?

Question

JavaScript

There is such a js code for processing checkboxes

$("#change").on("click", function(e){
       e.preventDefault()
       var keys = $("#w0").yiiGridView("getSelectedRows");
       $.ajax({
         url: "'. \yii\helpers\Url::toRoute(['/product/exist']) .'",
         type: "POST",
         data: {id: keys},
         success: function(){
            $("input").parent().parent().removeClass("danger")
            $("input:checked").prop("checked", false)
         }
       })
   });

GridView has this column with icons:

<span style="color:#090" title="Товар в наличии" class="glyphicon glyphicon-ok"></span>
<span style="color:#c11" title="Товар отсутсвует" class="glyphicon glyphicon-remove"></span>

Depending on the state of the model, one or another icon is displayed.
Data is sent to the controller by Ajax, where it is processed and its state changes.
You need to get the data of the changed models, and display the corresponding icon.
After reloading the page, everything changes as it should. But you need it without reloading with Ajax
. Unfortunately, I'm not strong in js, and this piece of code is all that was enough for me.

Answer 1

Good evening.
Here is a simplified way for you using the status change as an example. In the table column, the same span.

// GirdView column
[
    'attribute' => 'status',
    'contentOptions' => function($model, $key, $index, $column){
         return [
             'class' => 'status-column',
             'style' => 'cursor:pointer',
             'id' => $key,
             'onclick' => '
                    $.ajax({
                       url: "' . Url::toRoute('/ajax/update-status-mark') . '",
                       method: "POST",
                       data: {id: ' . $key . ', status: ' . $model->status . '},
                       success: function(data){
                          if(data == 0){
                             $("td#' . $key . ' span").removeClass("label-success").addClass("label label-danger").text("Blocked")
                             $("tr[data-key=' . $key . ']").removeAttr("style")
                          }
                          else{
                             $("td#' . $key . ' span").removeClass("label-danger").addClass("label label-success").text("Active")
                             $("tr[data-key=' . $key . ']").css("backgroundColor","rgb(226, 243, 227)")
                          }
                       }
                    })
                '
         ];
     },
]

// Controller action
public function actionUpdateStatusMark($id)
{
    $model = $this->findModel($id);
    $model->status = $model->status == 0 ? 1 : 0;
    $model->save(false,['status']);
    return $model->status;
}

Answer 2

success: function(data){}
In data, the server's response. Analyze what in the response is responsible for your conditions for displaying the icon and change the icon with a class or completely replacing the tag with the icon (well, or if you always have 2 icons, then through .toggle or .css display: none)