Yii2 Pjax не работает

Question

Я хочу обновить gridview с помощью Pjax, но как-то он не работает. Вот код:

_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> 

Контроллер

/** 
    * 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, 
     ]); 
    } 

S imple search работает, но Pjax нет. Я новичок в Yii2, поэтому любая помощь будет оценена. Спасибо.

Answer 1

Спасибо Эдин. Это помогло мне решить проблему. Вот что я сделал. Это может помочь кому-то столкнуться с одной и той же проблемой.

Как сказал Эдин, вам необходимо передать URL-адрес вместе с параметрами поиска в Pjax, чтобы обновить gridview.

Вот мой отредактированный код:

$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

Путь Pjax работает, отправив другой запрос со специальными заголовками. Когда pjax-запрос обнаружен, только html, необходимый для обновления контейнера, возвращается с сервера. Линия

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

отправит другой запрос, а внутри actionIndex queryParams будет пустым.

Вы можете решить эту проблему, сохранив параметры поиска до сеанса или указав pjax url с параметрами строки запроса.

Попробуйте следующее:

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

В этом случае вам не нужно, чтобы создать свой собственный вызов Ajax, просто создать URL с фильтрами.