Задать вопрос
dcc
@dcc
junior

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

Есть вот такой 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 я не силен, и этот кусочек кода - это все на что меня хватило.
  • Вопрос задан
  • 120 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
slo_nik
@slo_nik Куратор тега Yii
Добрый вечер.
Вот Вам упрощённый способ на примере смена статуса. В колонке таблицы всё те же 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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vitaliy_balahnin
Новичок в веб-разработке
success: function(data){}

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

Войдите, чтобы написать ответ

Похожие вопросы