How to organize an ajax request, while updating via pjax, yii?

Question

JavaScript

Hello.
You need to make a request, as I understand it ajax, and update the gridview with pjax.
The page has a dropdown list.

<div class="notes-form">
        <?php Pjax::begin(['id' => 'driverPjax']) ?>
            <?php $form = ActiveForm::begin(['options' => ['data-pjax' => true]]); ?>         
                <? $param = ['prompt' => 'Выберите водителя', 'id' => 'dropDownList-driver']; ?>
                <?= Html::dropDownList('driver', 0, $Fio, $param); ?>         
            <?php ActiveForm::end(); ?>
        <?php Pjax::end(); ?>     
        </div>

There is also a grid view

<?php Pjax::begin(['id' => 'notes']) ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            [
                'attribute' => 'Fio',
                'value' => function ($model) {
                    return $model->idDriver['Fio'];
                } 
            ],
            'Cash',
            'Date',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
    <?php Pjax::end() ?>

Now we need to update the gridview (re-generate dataProvider and serchModel), depending on the dropdown list. How can this be implemented?

Answer 1

If you need to refresh the gridview after submitting the form, then you can simply reload the PJAX container, like so:

$('#driverPjax').on('pjax:end',   function() { 
  $.pjax.reload({
    container : '#notes', timeout: '5000',
  });		
});

If you need to update the gridview immediately after selecting from the drop-down list, then the container reload function must be hung on the corresponding drop-down list event, for example:

onChange = "$.pjax.reload({container : '#notes', timeout: '5000'});"