Yii2 ajax перезагрузка данных

220

01 февраля 2018, 19:47

На странице выводится таблица сотрудников при помощи виджета yii\grid\GridView. В заголовочной строке при помощи виджета kartik\select2\Select2 выводится два инпута для фильтрации. Один для выбора филиала, второй для выбора должности. При выборе какого-либо значения из select-a происходит перезагрузка страницы и выводится таблица с применением фильтра. Задача добавить лоадер после того момента как пользователь выбрал какой-либо пункт в фильтре, так как при долгой отработке фильтрации для пользователя непонятно что происходит. В связи с этим у меня два вопроса:

Это должен быть ajax запрос?
Если да, то как это можно организовать? Я не могу найти обработчики указанных выше событий и не знаю на что их надо заменить Вот как выглядит виджет GridView со встроенными в него фильтрами-виджетами Select2:

'dataProvider' => $dataProvider, 'filterModel' => $searchModel,

                'tableOptions' => [
                    'class' => 'table table-list', 
                ],
                'layout'=>"{items}{pager}", 
                'columns' => [
                    [
                        'attribute' => 'id',
                        'filter' => false
                    ],
                    [
                        'attribute'=>'filial_id',
                        'filter'=>Select2::widget([
                            'model' => $searchModel,
                            'attribute' => 'filial_id',
                            'data' => ArrayHelper::map($filials, 'id', 'filial_name'),
                            'theme' => Select2::THEME_BOOTSTRAP,
                            'options' => [
                                'multiple' => true,
                                'placeholder' => 'Выберите филиал'
                            ],
                            'toggleAllSettings' => [
                                'selectLabel' => false,
                            ],
                            'pluginOptions' => [
                                'width' => '200px',
                            ],
                            'pluginEvents' => [
                                'select2:select' => "
                                    function() { 
                                        $(this).prop('disabled', true);
                                    }
                                "
                            ],
                        ]),
                        'label'=>'Филиал',
                        'value'=>function($model){
                                return $model->filial->filial_name;
                            },
                        'format'=>'text',
                        'visible' => $is_admin
                    ],        
                    'name',
                    [
                        'attribute'=>'post_code',
                        'label'=>'Должность/Специальность/Разряд',
                        'filter'=>Select2::widget([
                            'model' => $searchModel,
                            'attribute' => 'post_code',
                            'data' => ArrayHelper::map($posts, 'code', 'name'),
                            'theme' => Select2::THEME_BOOTSTRAP,
                            'options' => [
                                'multiple' => true,
                                'selectLabel' => false,
                                'placeholder' => 'Выберите должность',
                            ],
                            'toggleAllSettings' => [
                                'selectLabel' => false,
                            ],
                            'pluginOptions' => [
                                'width' => '200px',
                            ],
                            'pluginEvents' => [
                                'select2:select' => "
                                    function() { 
                                        $(this).prop('disabled', true);
                                    }
                                "
                            ],
                        ]),
                        'value'=>function($model){
                            return implode(ArrayHelper::map($model->workerPosts, "id", "fullname"), "<br/>");
                            },
                        'format'=>'html',
                    ],
                    [
                        'attribute'=>'schedule_id',
                        'value'=>function($model){
                            return $model->getScheduleName();
                        },
                        'format'=>'text',
                    ],
                    [
                        'class' => 'yii\grid\ActionColumn',
                        'template' => '{dissmiss} {history} {update} {delete}',
                        'buttons' => [
                            'dissmiss' => function ($url,$model) {
                                if($model->is_worker == 1){
                                    $btn = Html::a(
                                        '<span class="hidden"><i class="fa fa-spinner fa-spin"></i> </span>'."Уволить",
                                        ['dissmiss', 'id' => $model->id],
                                        [
                                            "data" => [
                                                'id' => $model->id,
                                                'target' => '#dissmissModal',
                                                //'toggle' => 'modal',
                                                'backdrop' => 'static',
                                            ],
                                            "class" => "btn btn-sm btn-default load-ajax-worker"
                                        ]
                                    );
                                } else {
                                    $btn = Html::a(
                                        "Вернуть",
                                        ['return', 'id' => $model->id],
                                        [
                                            "title" => "Вернуть работника",
                                            "data" => [ "method" => "POST" ],
                                            "class" => "btn btn-sm btn-default"
                                        ]
                                    );
                                }
                                return $btn;
                            },
                            'history' => function ($url,$model) {
                                return Html::a(
                                    '<span class="hidden"><i class="fa fa-spinner fa-spin"></i> </span>' . " История",
                                    ['history', 'id' => $model->id],
                                    [
                                        "data" => [
                                            'id' => $model->id,
                                            'target' => '#historyModal',
                                            //'toggle' => 'modal',
                                            'backdrop' => 'static',
                                        ],
                                        "class" => "btn btn-sm btn-default history-ajax-worker"
                                    ]
                                );
                            },
                            'update' => function ($url,$model) {
                                return Html::a(
                                    FA::icon('pencil'), 
                                    $url,
                                    [
                                        "title" => "Редактировать информацию",
                                        "data" => [ "method" => "POST" ],
                                        "class" => "btn btn-sm btn-default"
                                    ]
                                );
                            },
                            'delete' => function ($url, $model) {
                                return Html::a(
                                    FA::icon('times'), 
                                    $url,
                                    [
                                        "title" => "Удалить сотрудника",
                                        "data" => [ "method" => "POST", "confirm" => "Сотрудник будет удален. Вы уверены?" ],
                                        "class" => "btn btn-sm btn-default"
                                    ]
                                );
                            },
                        ],                
                    ],
                ],
            ]); ?>

Answer 1

В дополнение к комментарию. Вот как у меня это сделано

//функция отображения товаров в корзине
function loadProductInMiniCart(){
    //....тут идет всякий подготовительный код
    //если все ок, запуск функции анимации, которая принимает элемент, который нужно анимаровать
    //функция анимации написана собственноручно(не скрипт из сети)
                animateLoaderAjax(svgLoaderAjax); 
                var xhr = new XMLHttpRequest();//подготовка Ajax-запроса
                var g = JSON.stringify(u.a);
                xhr.open("POST", "/cart", true);
                xhr.setRequestHeader("Content-Type", "text/plain");
                xhr.send(g); //отправка Ajax-запроса
                xhr.onreadystatechange = function(){ //событие, которое отслеживает состояние запроса
                    if (xhr.readyState !=4) return;
                    if(xhr.status == 200) { 
//все это время работает анимация
    //если статус запроса 200 (Ок), то отключаем анимацию
                    animateLoaderAjaxEnd(svgLoaderAjax);
                    var k = JSON.parse(xhr.responseText);
                    console.log(k);
    }
}