34k+
Yii v2 snippet guide
Revision #175 was created by 
rackycz on Mar 21, 2020, 2:06:04 AM.
modal, pjax
Content
[...]
Require all granted</Directory>
</VirtualHost>
```
You can then use http://myFictiveUrl.local in your browser
**Modal window + ajax**
---
Let's have a GridView (list of users) with edit-button which will open the edit-form in a modal window. Once user-detail is changed, ajax validation will be executed. If something is wrong, the field will be highlihted. If everything is OK and saved, modal window will be closed and the GridView will be updated.
Let's add the button to the GridView in the view **index.php** and let's wrap the GridView into the Pjax:
```php
<?php yii\widgets\Pjax::begin();?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'id' => 'user-list-GridView',
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'username',
'email:email',
['class' => 'yii\grid\ActionColumn',
'buttons' => [
'user_ajax_update_btn' => function ($url, $model, $key) {
return Html::a ( '<span class="glyphicon glyphicon-share" aria-hidden="true"></span> ',
['user/update', 'id' => $model->id],
['class' => 'openInModal', 'data-modal-titl' => 'Some text']
);
},
],
'template' => '{update} {view} {delete} {user_ajax_update_btn}'
],
],
]); ?>
<?php yii\widgets\Pjax::end();?>
```
Plus add (to the end of this view) following JS code:
```php
<?php
// This section can be moved to "\views\layouts\main.php"
yii\bootstrap\Modal::begin([
'header' => '<span id="modalTitle">Title</span>',
'id' => 'modalDialog1',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
yii\bootstrap\Modal::end();
$this->registerJs(
"$('a.openInModal').click(function(e){
e.preventDefault();
$('#modalDialog1 #modalTitle').text('aaa');
$('#modalDialog1').modal('show')
.find('#modalContent')
.load($(this).attr('href'));
return false;
});",
yii\web\View::POS_READY,
'modalHandler'
);
?>
```
Now we need to modify the **updateAction**:
```php
public function actionUpdate($id)
{
$model = $this->findModel($id);
if ($model->load(Yii::$app->request->post()) && $model->save()) {
if (Yii::$app->request->isAjax) {
return "<script>"
. "$.pjax.reload({container:'#user-list-GridView'});"
. "$('#modalDialog1').modal('hide');"
. "</script>";
}
return $this->redirect(['view', 'id' => $model->id]);
}
if (Yii::$app->request->isAjax) {
return $this->renderAjax('update', [
'model' => $model,
]);
}
return $this->render('update', [
'model' => $model,
]);
}
```
And file \_form.php:
```php
<?php yii\widgets\Pjax::begin([
'id' => 'user-detail-Pjax',
'enablePushState' => false,
'enableReplaceState' => false
]); ?>
<?php $form = ActiveForm::begin([
'id'=>'user-detail-ActiveForm',
'options' => ['data-pjax' => 1 ]
]); ?>
<?= $form->field($model, 'username')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'password')->passwordInput(['maxlength' => true]) ?>
<?= $form->field($model, 'email')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'authKey')->textInput(['maxlength' => true]) ?>
<div class="form-group">
<?= Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
```