Yii2 Pjax funktioniert nicht

Question

Ich möchte die Gridview mit Pjax aktualisieren, aber irgendwie funktioniert es nicht. Hier ist der 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, 
     ]); 
    } 

S Die Suche funktioniert, aber Pjax funktioniert nicht. Ich bin neu bei Yii2, also würde jede Hilfe geschätzt werden. Vielen Dank.

Answer 1

Dank Edin. Es hat mir geholfen, das Problem zu lösen. Hier ist was ich getan habe. Es könnte jemandem helfen, der das gleiche Problem hat.

Wie Edin erwähnt, müssen Sie die URL zusammen mit den Suchparametern zum Pjax übergeben, um die Gridview zu aktualisieren.

Hier ist meine editierte 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

Die Funktionsweise von Pjax besteht darin, dass eine weitere Anfrage mit speziellen Headern gesendet wird. Wenn eine pjax-Anforderung erkannt wird, wird nur der zum Aktualisieren des Containers erforderliche HTML-Code vom Server zurückgegeben. Zeile

wird eine weitere Anfrage senden und innerhalb actionIndex queryParams wird leer sein.

Sie können dies lösen, indem Sie Suchparameter in der Sitzung speichern oder indem Sie pjax url mit Parametern in der Abfragezeichenfolge angeben.

Versuche folgende:

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

In diesem Fall brauchen Sie keine eigenen Ajax-Aufruf zu erstellen, nur URL erstellen mit mit Filter.