Как организовать ajax запрос, при этом обновление сделать через pjax, yii?

Question

[Лев К]

Всем привет.
Нужно сделать запрос, я так понимаю ajax, а обновить gridview pjax'ом.
На странице есть выпадающий список

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

Так же есть 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() ?>

Теперь нужно обновлять gridview (заново формировать dataProvider и serchModel), в зависимости от выпадающего списка. Как это можно реализовать ?

Answer 1

[Максим Федоров]

Если нужно обновить гридвью после сабмита формы, тогда можно просто перезагрузить PJAX-контейнер, например:

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

Если же нужно обновлять гридвью непосредственно после выбора из выпадающего списка, тогда функцию перезагрузки контейнера нужно повесить на соответствующее событие выпадающего списка, например:

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

Comments

[Лев К]

Максим Федоров он перезагрузит контейнер, а данные он где возьмет новые ? если reload обращается к контроллеру еще раз (от куда рендериться данное представление) , то надо туда передать данные из выпадающего списка ... Можно этот момент не много по подробнее ....

[Максим Федоров]

При перезагрузке Pjax обратится к контроллеру, откуда рендерится (если другое не задано в настройках). Передать выбранное значения можно, например GET-ом указав его при перезагрузке контейнера в параметре url:
$.pjax.reload({container : '#notes', timeout: '5000', url: '....'});
и уже на серверной части обрабатывать этот параметр, как Вам нужно

[Лев К]

Максим Федоров: сделал вот такой выпадающий список
<? $param = [
'prompt' => 'Выберите водителя',
'id' => 'dropDownList-driver',
'onChange' => "$.pjax.reload({container : '#notes', url:driver});"
]; ?>
<?= Html::dropDownList('driver', 0, $Fio, $param); ?>

Как я понял $.pjax.reload выполнит get запрос с параметром url = выбранному id .
В контроллере actionIndex
if (Yii::$app->request->isGet) {
$id = $_GET['url'];
}
Почему то не определяет url. При перво загрузке экшена какой метод передачи данных используется ? По ходу условие срабатывает до того, как данные в url передам.

[Максим Федоров]

driver что такое driver? JS-переменная? если да то чему она равна?

[Лев К]

Максим Федоров: <?= Html::dropDownList('driver', 0, $Fio, $param); ?>
'driver' - name для выпадающего списка,
0 - начальное значение,
$Fio - массив 'id' => 'Fio',

[Максим Федоров]

я имею ввиду здесь
'onChange' => "$.pjax.reload({container : '#notes', url:driver});"
у Вас ссылка должна быть в параметре url

[Лев К]

Максим Федоров: аа дак здесь этот driver который я указал ранее =) 'driver' - name для выпадающего списка,

[Лев К]

Максим Федоров: почему то не хочет отправлять id на сервер
$('body').on('click', '.btn-success', function (){
var id_driver = $('#dropDownList-driver').val();
alert(id_driver);
$.pjax.reload({id : id_driver, container : '#notes'});
});
Смотрю в firebug параметры get запроса, и там только _pjax #notes, id нету, как его можно отправить здесь?

[Максим Федоров]

$.pjax.reload({id : id_driver, container : '#notes'});

а где он здесь указан? Вам нужно сформировать ссылку для перезагрузки пиджака с ИД и по ней его перезагружать

[Максим Федоров]

приблизительно так:
$.pjax.reload({id : id_driver, container : '#notes', url: 'site.com/default/index?_pjax=#notes&id_driver=' + id_driver});

[Лев К]

Максим Федоров: спасибо, помогло, в этом случае id : id_driver не нужен получается ? А как нибудь по другому можно делать ? или $.pjax.reload организует get запрос, а его параметры можно реализовывать только в виде ссылки ?

[Максим Федоров]

id : id_driver - не нужен.
pjax - может отправлять как GET-запросы (с параметрами в ссылке), так и POST-запросы(без параметров в ссылке). Как работать с POST можно почитать в доке по Pjax

[Лев К]

Максим Федоров: хорошо, спасибо, разобрался )