Yii2 Pjax nie działa

Question

Chcę odświeżyć gridview za pomocą Pjax, ale jakoś nie działa. Tutaj kod:

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

Kontroler

/** 
    * 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 działa wyszukiwanie, ale Pjax nie jest. Jestem nowy w Yii2, więc każda pomoc będzie doceniona. Dziękuję Ci.

Answer 1

Dzięki Edin. Pomógł mi rozwiązać problem. Oto co zrobiłem. Może pomóc komuś, kto zmaga się z tym samym problemem.

Jak wspomniał Edin, musisz przekazać adres URL wraz z parametrami wyszukiwania do Pjaxa w celu odświeżenia widoku siatki.

Oto mój kod Zmieniano:

$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

Sposób działania Pjax polega na wysyłaniu kolejnego żądania ze specjalnymi nagłówkami. Po wykryciu żądania pjax tylko html wymagane do aktualizacji kontenera jest zwracane z serwera. Linia

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

wyśle ​​kolejne żądanie, a wewnątrz actionIndex queryParams będzie puste.

Można to rozwiązać, zapisując parametry wyszukiwania w sesji lub specyfikując adres URL pjax z parametrami w ciągu zapytania.

Spróbuj następujący:

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

W tym przypadku nie trzeba tworzyć własne wywołanie ajax, wystarczy utworzyć link z filtrami.