Yii2 Pjax non funziona

Question

Desidero aggiornare la griglia con Pjax ma in qualche modo non funziona. Ecco il codice:

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

S la ricerca di attivazione funziona ma Pjax no. Sono nuovo di Yii2 quindi qualsiasi aiuto sarebbe apprezzato. Grazie.

Answer 1

Grazie Edin. Mi ha aiutato a risolvere il problema. Ecco cosa ho fatto. Potrebbe aiutare qualcuno che sta affrontando lo stesso problema.

Come Edin ha menzionato, è necessario passare l'url insieme ai parametri di ricerca al Pjax per aggiornare il gridview.

Ecco il mio codice modificato:

$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

Il modo in cui Pjax sta funzionando è inviando un'altra richiesta con intestazioni speciali. Quando viene rilevata la richiesta di pjax, solo il codice html richiesto per aggiornare il contenitore viene restituito dal server. Linea

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

invierà un'altra richiesta e all'interno actionIndex queryParams sarà vuoto.

È possibile risolvere questo memorizzando i parametri di ricerca in sessione o specificando l'URL pjax con i parametri nella stringa di query.

Prova seguente:

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

In questo caso non è necessario creare propria chiamata ajax, basta creare url con con i filtri.