The page displays the employee table using the yii \ grid \ GridView widget. In the header line using the widget kartik \ select2 \ Select2 displays two input for filtering. One to select a branch, the second to select a position. Selecting any value from select-a reloads the page and displays a table using a filter. The task is to add a loader after the moment when the user chooses any item in the filter, since after a long filtering run it is not clear for the user what is happening. In this regard, I have two questions:

  • Should it be an ajax request?

  • If so, how can this be arranged? I can’t find the handlers for the above events and I don’t know what to replace them with. Here’s what the GridView widget looks like with the Select2 widget filters built into it:

'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" ] ); }, ], ], ], ]); ?>
  • At the time of sending an ajax request, you need to start the animation function (turn on the download animation), at the time of receiving the answer, turn it off. Therefore, we need a code to send the request. - Dmytryk
  • @ Dmytryk, this code is how and where to insert? - Baurzhan

1 answer 1

In addition to the comment. This is how I did it.

 //функция отображения товаров в корзине function loadProductInMiniCart(){ //....тут идет всякий подготовительный код //если все ок, запуск функции анимации, которая принимает элемент, который нужно анимаровать //функция анимации написана собственноручно(не скрипт из сети) animateLoaderAjax(svgLoaderAjax); var xhr = new XMLHttpRequest();//подготовка Ajax-запроса var g = JSON.stringify(ua); 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); } }