Yii2 Pjax not working

Question

I want to update gridview using Pjax, but somehow it doesn't work. Here is the code:

_search.php

<?php use yii\helpers\Html; use yii\widgets\ActiveForm; use yii\widgets\Pjax; $this->registerJs(" $('#btnAjaxSearch').click(function(){ $.ajax({ type: 'get', data: $('.bank-search form').serializeArray(), success: function (data) { $.pjax.reload({container:\"#bank\"}); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('error'); } }); return false; }); ", \yii\web\View::POS_END, 'bank-search'); ?> <div class="bank-search"> <?php Pjax::begin(['id' => 'bank-form']); ?> <?php $form = ActiveForm::begin([ 'action' => ['index'], 'method' => 'get', ]); ?> <?= $form->field($model, 'bank_name') ?> <?= $form->field($model, 'state') ?> <?= $form->field($model, 'district') ?> <?= $form->field($model, 'city') ?> <div class="form-group"> <?= Html::Button('Search', ['class' => 'btn btn-primary','id' => 'btnAjaxSearch']) ?> </div> <?php ActiveForm::end(); ?> <?php Pjax::end(); ?> </div> 

index.php

  <?php use yii\helpers\Html; use yii\grid\GridView; use yii\widgets\Pjax; $this->title = 'Banks'; $this->params['breadcrumbs'][] = $this->title; ?> <div class="bank-index"> <h1><?= Html::encode($this->title) ?></h1> <?php echo $this->render('_search', ['model' => $searchModel]); ?> <p> <?= Html::a('Create Bank', ['create'], ['class' => 'btn btn-success']) ?> </p> <?php Pjax::begin(['id' => 'bank']); ?> <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], 'id', 'bank_name', 'state', 'district', 'city', // 'branch', ['class' => 'yii\grid\ActionColumn'], ], ]); ?> <?php Pjax::end(); ?> </div> 

controller

  /** * Lists all Bank models. * @return mixed */ public function actionIndex() { $searchModel = new BankSearch(); $dataProvider = $searchModel->search(Yii::$app->request->queryParams); return $this->render('index', [ 'searchModel' => $searchModel, 'dataProvider' => $dataProvider, ]); } 

A simple search works, but Pjax doesn't. I am new to Yii2, so any help would be appreciated. Thanks.

Answer 1

Thanks Edin. This helped me solve the problem. Here is what I did. This may help someone solve the same problem.

As Edin said, you need to pass the URL along with the search parameters in Pjax to update the gridview.

Here is my edited code:

  $js = <<<JS // get the form id and set the event $('#bank-form-id').on('beforeSubmit', function(e) { var form = $(this); if(form.find('.has-error').length) { return false; } $.ajax({ url: form.attr('action'), type: 'post', data: form.serialize(), success: function(response) { var csrf = yii.getCsrfToken(); var bank_name = $('#banksearch-bank_name').val(); var state = $('#banksearch-state').val(); var district = $('#banksearch-district').val(); var city = $('#banksearch-city').val(); var url = form.attr('action')+ '&_csrf='+csrf+'&BankSearch[bank_name]='+bank_name+'&BankSearch[state]='+state+'&BankSearch[district]='+district+'&BankSearch[city]='+city; $.pjax.reload({url: url, container:'#bank'}); } }); }).on('submit', function(e){ e.preventDefault(); }); JS; $this->registerJs($js); 

Answer 2

The Pjax path works by sending another request with special headers. When a pjax request is detected, only the html needed to update the container is returned from the server. Line

 $.pjax.reload({container:\"#bank\"}); 

will send another request, and inside the actionIndex queryParams will be empty.

You can solve this problem by saving the search parameters before the session or by specifying the pjax url with the parameters in the query string.

Try the following:

  var url = urlWithFilters(); $.pjax({url: url, container: '#bank'}); 

In this case, you do not need to create your own ajax call, just create a url with filters.