Возможно ли в Yii2 асинхронное добавление данных с обновлениием их в ListView с помощью PJAX?

Question

[EVOSandru6]

Добрый день,

Такая штука отлично работает с GridView

Example:

Контроллер

public function actionIndex()
    {
        $model = new Notes();
        if ($model->load(Yii::$app->request->post()) && $model->save())
        {
            $model = new Notes();
        }
        $searchModel = new NotesSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'model' => $model,
        ]);
    }

    public function actionIndex()
    {
        $model = new Notes();
        if ($model->load(Yii::$app->request->post()) && $model->save())
        {
            $model = new Notes();
        }
        $searchModel = new NotesSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
 
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'model' => $model,
        ]);
    }

Шаблоны

index.php

<?php

use yii\helpers\Html;
use yii\widgets\Pjax;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel app\modules\notes\models\NotesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Notes');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="notes-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= $this->render('_form',[
        'model' => $model,
    ]) ?>

<?php Pjax::begin(['id' => 'notes']) ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'note:ntext',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
<?php Pjax::end() ?>

</div>

<?php
 
use yii\helpers\Html;
use yii\widgets\Pjax;
use yii\grid\GridView;
 
/* @var $this yii\web\View */
/* @var $searchModel app\modules\notes\models\NotesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
 
$this->title = Yii::t('app', 'Notes');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="notes-index">
 
    <h1><?= Html::encode($this->title) ?></h1>
 
    <?= $this->render('_form',[
        'model' => $model,
    ]) ?>
 
<?php Pjax::begin(['id' => 'notes']) ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
 
            'id',
            'note:ntext',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
<?php Pjax::end() ?>
 
</div>

_form.php

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\modules\notes\models\Notes */
/* @var $form yii\widgets\ActiveForm */
?>

<?php
    $this->registerJs(
        '$("document").ready(function(){
            $("#new_note").on("pjax:end", function() {
            $.pjax.reload({container:"#notes"});  //Reload GridView
        });
    });'
    );
?>

<div class="notes-form">
<?php yii\widgets\Pjax::begin(['id' => 'new_note']) ?>
    <?php $form = ActiveForm::begin(['options' => ['data-pjax' => true]]); ?>

    <?= $form->field($model, 'note')->textarea(['rows' => 6]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>

</div>

<?php
 
use yii\helpers\Html;
use yii\widgets\ActiveForm;
 
/* @var $this yii\web\View */
/* @var $model app\modules\notes\models\Notes */
/* @var $form yii\widgets\ActiveForm */
?>
 
<?php
    $this->registerJs(
        '$("document").ready(function(){
            $("#new_note").on("pjax:end", function() {
            $.pjax.reload({container:"#notes"});  //Reload GridView
        });
    });'
    );
?>
 
<div class="notes-form">
<?php yii\widgets\Pjax::begin(['id' => 'new_note']) ?>
    <?php $form = ActiveForm::begin(['options' => ['data-pjax' => true]]); ?>
 
    <?= $form->field($model, 'note')->textarea(['rows' => 6]) ?>
 
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
 
    <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>
 
</div>

Взято отсюда:

https://nix-tips.ru/yii2-primeryaem-pjax-na-active...

Пробую заменить фрагмент ListView на GridView

<?
    Pjax::begin(['id' => 'notes',
        'timeout' => false,
        'enablePushState' => false,
        'clientOptions' => ['method' => 'POST']
    ]);

    echo ListView::widget([
        'dataProvider' => $dataProvider,
        'itemView' => '_list_item',
        'layout' => "{items}\n{pager}"
    ]);
    yii\widgets\Pjax::end();
    ?>

И происходит перезагрузка страницы.
Можно ли это исправить?

Answer 1

[Максим Тимофеев]

ListView c gjvjom

не встречал

Такая штука отлично работает с GridView

если работает и GridView то и с listView будет работать. И там и там данные в activeDataProvider. Так что все так же

И происходит перезагрузка страницы.

Не должна. Возможно проблема в другом месте, проверяйте что в debug. Куда запросы идут, возможно на обращению к серверу редирект идет.

Comments

[EVOSandru6]

Возможно ли в Yii2 асинхронное добавление данных с обновлениием их в ListView с помощью PJAX?

Исправил)

Я тоже думал. что разницы не будет, но с ListView происходит перезагрузка(

[Максим Тимофеев]

EVOSandru6: уверен, что дело не в ListView. Разбирайте куда идет pjax запрос и что получает в ответ

Answer 2

[EVOSandru6]

<?php yii\widgets\Pjax::begin(['id' => 'new_note']) ?>
    <?php $form = ActiveForm::begin(
        [
            'fieldConfig' => [
                'template' => '{label}{error}{input}',
                'inputOptions'=>[
                    'class'=>'form-control h-form__input h-input-response'
                ],
                'options' => [
                    'tag' => 'div',
                ],
            ],
            'options' => [
                'data-pjax' => true,
            ]
        ]); ?>

    <?= $form->field($model, 'description')->textarea([
        'rows' => 6,
        'style' => 'margin-bottom:0;'
    ])->label(false) ?>

    <div class="c-voices__footer">
        <?= Html::submitButton( Yii::t('app', 'send'), [
            'class' => 'btn btn-success pull-right'
        ]) ?>
    </div>

    <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>
</div>