It’s rare that I post a request, but this problem has defeated me up to now.
I have a GridView, generated by Gii, on an index page with pjax enabled. The create, update and view (there is no delete) views are in a Modal: \yii\bootstrap5\Modal;. They work as expected until a filter, sort or javascript $(".grid-view").yiiGridView("applyFilter"); “refresh” operation. At which point these views will not open in the modal but “full page”.
Over approximately 8 hours, I have tried multiple fixes using enablePushState true and false, enableReplaceState true and false, timeout=false, timeout=5000 and other values, data-pjax = 0 on different controls and all the various different permutations of these (there are a lot). I have also tried all the fixes I can find (there are quite a few) on this forum and StackOverFlow. None work.
Steps to recreate:
- Using a database table, with Gii, create a Model and CRUD with
enable Pjaxselected - Add a Modal “uses” to the index.php view:
use \yii\bootstrap5\Modal; - Add the following code above the GridView code:
<?php
Modal::begin([
'title' => '<h1 class="text-center">' . \Yii::t('app', 'User Information') . '</h1>',
'id' => 'modal',
'size' => 'modal-md',
'scrollable' => true,
'toggleButton' => [
'label' => \Yii::t('app', 'Create New User'),
'class' => 'btn btn-success mb-3 modalButton',
'value' => Url::to(['create']), // The "view" file
],
'dialogOptions' => [
'aria-labelledby' => 'staticBackdropLabel',
],
'clientOptions' => [
'backdrop' => true,
'data-bs-backdrop' => 'static',
'data-bs-keyboard' => false,
],
]);
echo '<div id="modalContent"></div>';
Modal::end();
?>
- In
actionCreate,actionUpdateandactionViewchange thereturn $this->render(...);statement toreturn $this->renderAjax(...);
Open in a Browser (I’ve tried Chromium, Firefox, Opera) and the modal dialog works just fine until, in the GridView, a sort or filter is performed.
I can live without Pjax but it would be nice to have for the user experience.
The page code for index.php is as follows:
<?php
use \app\models\UserInfo;
use \app\components\VAGlobals;
use \yii\bootstrap5\LinkPager;
use \yii\bootstrap5\Html;
use \yii\bootstrap5\Modal;
use \yii\helpers\Url;
use \yii\grid\ActionColumn;
use \yii\grid\GridView;
/** @var \yii\web\View $this */
/** @var \app\models\search\UserInfoSearch $searchModel */
/** @var \yii\data\ActiveDataProvider $dataProvider */
/** @var \app\components\VAGlobals */
$this->title = \Yii::t('app', 'User Information');
$this->params['breadcrumbs'][] = $this->title;
// Pass the Meta_Tags to the layout file
$this->params['meta_description'] = ucwords(Html::encode($this->title));
$this->params['meta_keywords'] = strtolower(Html::encode($this->title));
$this->params['meta_robots'] = strtolower('follow, noindex');
?>
<div class="user-info-index">
<h1 class="text-center"><?= Html::encode($this->title) ?></h1>
<!--Modal-->
<?php
Modal::begin([
'title' => '<h1 class="text-center">' . \Yii::t('app', 'User Information') . '</h1>',
'id' => 'modal',
'size' => 'modal-md',
'scrollable' => true,
'toggleButton' => [
'label' => \Yii::t('app', 'Create New User'),
'class' => 'btn btn-success mb-3 modalButton',
'value' => Url::to(['create']), // The "view" file
],
'dialogOptions' => [
'aria-labelledby' => 'staticBackdropLabel',
],
'clientOptions' => [
'backdrop' => true,
'data-bs-backdrop' => 'static',
'data-bs-keyboard' => false,
],
]);
echo '<div id="modalContent"></div>';
Modal::end();
?>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<?php \yii\widgets\Pjax::begin(['id' => 'userInfoPjax', 'timeout' => 5000]) ?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'layout' => '{summary}{items}', // Providing a Link Page below
'columns' => [
[
'attribute' => 'id',
'contentOptions' => [
'style' => 'width: 60px; white-space: nowrap',
],
],
[
'attribute' => 'username',
'contentOptions' => [
'class' => ['fw-medium'],
],
],
'first_name',
'last_name',
'email:email',
'company_id',
[
'attribute' => 'status',
'format' => 'html',
'value' => function ($data)
{
return VAGlobals::getStatusBadge($data->status);
},
'filter' => $statusItems,
'contentOptions' => ['style' => 'width: 70px'],
],
[
'attribute' => 'role',
'value' => function ($data)
{
return VAGlobals::getRoleName($data->role);
},
'filter' => $roleItems,
'contentOptions' => [
'style' => 'width: 60px; white-space: nowrap',
],
],
[
'class' => ActionColumn::className(),
'template' => '{view} {update}', // {delete} has been removed
'contentOptions' => ['class' => ['text-center'], 'style' => 'width: 70px; white-space: nowrap; '],
'buttons' => [
'update' => function ($action, UserInfo $model)
{
return Html::a(VAGlobals::UPDATE_BUTTON, $action, [
'id' => 'update' . $model->id,
'value' => $action,
'class' => 'modalButton',
'data-bs-toggle' => 'modal',
'data-bs-target' => '#modal',
]);
},
'view' => function ($action, UserInfo $model)
{
return Html::a(VAGlobals::VIEW_BUTTON, $action, [
'id' => 'view' . $model->id,
'value' => $action,
'class' => 'modalButton',
'data-bs-toggle' => 'modal',
'data-bs-target' => '#modal',
]);
},
],
],
],
]);
?>
<?php \yii\widgets\Pjax::end() ?>
<?= LinkPager::widget(['pagination' => $dataProvider->pagination]) ?>
</div>
The page code for view.php (the other two pages are similar but with a _form attached) is as follows:
<?php
use \yii\bootstrap5\Html;
use \yii\widgets\DetailView;
use \app\components\VAGlobals;
/** @var \yii\web\View $this */
/** @var \app\models\UserInfo $model */
/** @var \app\components\VAGlobals */
$this->title = 'User: ' . $model->username;
\yii\web\YiiAsset::register($this);
?>
<div class="user-info-view">
<div class="card border-success">
<div class="card-header">
<h4 class="text-center"><?= Html::encode($this->title) ?></h4>
</div>
<div class="card-body">
<?=
DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'username',
'first_name',
'last_name',
'email:email',
'company_id',
[
'attribute' => 'status',
'format' => 'html',
'value' => VAGlobals::getStatusBadge($model->status),
],
[
'attribute' => 'role',
'value' => VAGlobals::getRoleName($model->role),
],
'created_at:datetime',
[
'attribute' => 'created_by',
'label' => \Yii::t('app', 'Created By'),
'value' => VAGlobals::getCreatedUpdated($model->created_by),
],
'updated_at:datetime',
[
'attribute' => 'updated_by',
'label' => \Yii::t('app', 'Updated By'),
'value' => VAGlobals::getCreatedUpdated($model->updated_by),
],
],
])
?>
<div class="text-end">
<?= Html::Button(\Yii::t('app', 'Close'), ['class' => 'btn btn-secondary', 'data-bs-dismiss' => 'modal']) ?>
</div>
</div>
</div>
Any help would be appreciated as I have exhausted this forum, other forums, stackexchange etc. and have not found a work-around…
Thank you.