Difference between #174 and #175 of
Yii v2 snippet guide

Revision #175 has been created by rackycz on Mar 21, 2020, 2:06:04 AM with the memo:

modal, pjax
« previous (#174) next (#176) »

Changes

Title unchanged

Yii v2 snippet guide

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags unchanged

tutorial,beginner,yii2

Content changed

[...]
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() ?>
 
```
 
7 0
4 followers
Viewed: 274 971 times
Version: 2.0
Category: Tutorials
Tags: beginner, tutorial, yii2
Written by: rackycz
Last updated by: rackycz
Created on: Sep 19, 2019
Last updated: a year ago
Update Article
Revert to #174 | Revert to #175

Revisions

View all history