javascript — Yii2 pjax.reload не работает для обновления записей gridview
Я разработал функциональность строк на странице для просмотра в виде сетки. С выпадающим, имеющим варианты, такие как 5,10,25,50,100. При изменении любой из выпадающих опций мне нужно показать выбранное количество строк для сетки-вида. Для этого я создал Pjax-контейнер, имеющий вид сетки:
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
$this->title = 'Test Cards';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="row">
<div class="test-card-index">
<?= $this->render('_search', [ 'model' => $searchModel ]) ?>
</div>
</div>
<?php Pjax::begin(['id' => 'test_grid_pjax', 'enablePushState' => false, 'timeout' => 1000000]); ?>
<div class="row">
<?= GridView::widget([
'dataProvider' => $dataProvider,
'class' => 'table table-bordered responsive',
'id' => 'test_grid',
'summary' => "<div class='summary'><label>Showing {begin} - {end} of {totalCount} items.</label></div> <div class='col-sm-6 pageDropdown'> <label>Records per page</label> ".Html::dropDownList('pageSize', (int) Yii::$app->session->get('pageSize', Yii::$app->params['defaultPageSize']), Yii::$app->params['rowPerPage'], ['id' => 'pageSize', 'class' => 'form-control', 'onchange' => 'return reloadGrid("test_grid_pjax",this.value)']) . "</div>",
'layout' => '{summary}{items}<div class="pager">{pager}</div>',
'options' => ['class' => 'main-grid grid-view full-table'],
'columns' => [
'cc_amount',
'cc_number',
'cc_type',
'cc_status'
],
]);
?>
</div>
<?php Pjax::end(); ?>
_search.php выглядит так:
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<div class="test-card-search">
<?php $form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
'options' => ['data-pjax' => true , 'class'=>'search_form form-horizontal' ]
]); ?>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<?= Html::activeLabel($model, 'cc_number',['class'=>'control-label col-sm-5']); ?>
<div class="col-sm-6">
<?= Html::activeTextInput($model, 'cc_number', ['class'=>'form-control col-sm-5','autofocus'=>true]); ?>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<?= Html::activeLabel($model, 'cc_type',['class'=>'control-label col-sm-5']); ?>
<div class="col-sm-6">
<?= Html::activeDropDownList($model, 'cc_type',[ "RESTRICTED" => Yii::t('app','RESTRICTED'), "UNRESTRICTED" => Yii::t('app','UNRESTRICTED')],['prompt' => Yii::t('app','All Types'), 'class'=>'form-control col-sm-5']); ?>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5"></div>
<div class="col-md-3">
<div class="form-group">
<?= Html::submitButton('Search', ['class' => 'btn btn-blue']) ?>
<?= Html::resetButton('Reset', ['class' => 'btn btn-primary','id'=>'resetButton','onclick'=>"location.href = '".Yii::$app->urlManager->createUrl('testcard/index')."';"]) ?>
</div>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
действие в контроллере выглядит так:
public function actionIndex()
{
if (Yii::$app->request->get('pageSize')) {
Yii::$app->session->set('pageSize', (int) Yii::$app->request->get('pageSize'));
}
// to set the selected page number of the grid
if (Yii::$app->request->get('page')) {
Yii::$app->session->set('page',(int)Yii::$app->request->get('page'));
} else {
Yii::$app->session->set('page',1);
}
$searchModel = new TestCardSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
Функция reloadGrid () выглядит так:
<script type='text/javascript'>
function reloadGrid(id, value, url) {
$.pjax.reload({
container: "#" + id,
data: $('#search_form').serialize() + "&pageSize=" + value,
url: url,
push: false,
replace: false,
timeout: 1000000
});
}
</script>
При поиске по любому из полей он перезагружает всю страницу, а также устанавливает параметры поиска в URL.
Другая проблема заключается в том, что при изменении раскрывающегося списка «pageSize» он работает нормально только в первый раз, при любых других попытках выдает ошибку в консоли, например:
Uncaught TypeError: Cannot read property 'reload' of undefined
at reloadGrid (index:53)
at HTMLSelectElement.onchange (index:1)
Это проблема конфликтов JS?
Я пробовал много решений, прибегая к помощи, но не получилось.
Решение
Я столкнулся с подобной проблемой, что pjax не анализировал все поля поиска в сеточном фильтре. Мое решение / обходной путь / хак состоял в том, чтобы инициировать событие изменения поля фильтра сетки вместо прямого вызова перезагрузки pjax.
$('.date-range-filter').trigger('change'); // this works
/* // this didn't parse all the values from my form
$.pjax.reload({
container: "#grid-pjax"});
*/
Это связано с тем, как gridView собирает значения формы для отправки. Он фактически создает новую фиктивную форму для фильтров столбцов сетки, потому что нет фактической формы для фильтров заголовков gridview
В вашем случае вы также должны проверить источник и убедиться, что форма идентифицирована правильно
<?php $form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
'id'=> 'myFormId' // <---- try giving the form an id
'options' => ['data-pjax' => true , 'class'=>'search_form form-horizontal' ]
]); ?>
Вы также можете попробовать использовать атрибут селектора формы виджета pjax-
вместо pjax начинаются и заканчиваются. Это позволит pjax автоматически получить все поля ввода в этой форме.
<?php
Pjax::widget([
'id' => 'search-form',
'enablePushState' => false,
'enableReplaceState' => false,
'formSelector' => '#myFormId', // <-- the form to submit with pjax
// 'submitEvent' => 'change', /// whatever you want
]);
?>
Другие решения
Других решений пока нет …
detector