Как в зависимости от ответа сервера изменить иконку c помощью ajax?

Question

[monday_suicide]

Есть вот такой js код обработки чебоксов

$("#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 есть такая колонка с иконками:

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

В зависимости от состояния модели выводиться та, либо иная иконка.
Данные в контроллер отправляются аяксом, где обрабатываются и меняется их состояние.
Нужно получить данные изменившихся моделей, и вывести соответствующую иконку.
После перезагрузки страницы все меняется как надо. Но нужно без перезагрузки аяксом
К сожалению в js я не силен, и этот кусочек кода - это все на что меня хватило.

Answer 1

[Дмитрий]

Добрый вечер.
Вот Вам упрощённый способ на примере смена статуса. В колонке таблицы всё те же 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;
}

Comments

[monday_suicide]

Спасибо большое за помощь! Это конечно не то, что я хотел, т.к. у меня есть чебоксы, выделив нужные строки я хотел менять статус и иконку! Но подумав, я решил, менять по клику тоже удобно, может быть даже удобней. В любом случаи спасибо за помощь)

[Дмитрий]

Артур, я Вам показа пример, а Вы можете его менять как захотите.
"oncklick" можно заменить на "onchange"

[Дмитрий]

Этот код меняет цвет выделенной строки в таблице.
Измените так, чтобы он отправлял ajax.

[
  'class' => CheckboxColumn::class,
  'checkboxOptions' => function(){
      return [
          'onchange' => '
             var keys = $("#grid_table").yiiGridView("getSelectedRows");
             $(this).parent().parent().toggleClass("danger")
          '
      ];
  }
],

Answer 2

[Виталий Б]

success: function(data){}

В data ответ сервера. Разбирайте что в ответе отвечает за ваши условия вывода иконки и меняйте иконку классом или целиком заменяя тег с иконкой (ну или если у вас 2 иконки всегда, то через .toggle или .css display: none)