Differences

This shows you the differences between two versions of the page.

--- systems:yii2:modal_window [2018/05/31 15:59]
smayr [Modal Ajax View (called from GridView action)]
+++ systems:yii2:modal_window [2018/05/31 16:04] (current)
smayr [Modal Confirmation (called from GridView action)]
@@ Line 226: / Line 226: @@
 See also: [[http://techbloghunting.com/2017/05/17/yii2-bootstrap-modal/|Yii2 Bootstrap Modal]]
+=== Modal View (called from GridView action) using AJAX ===
+To add a modal window (popup) from the ''index'' view actions:
+Add ''renderAjax()'' call to your action:
+<code php>
+public function actionView($id)
+{
+    if (Yii::$app->request->isAjax) {
+        $modal = '';
+        $modal .= '<div class="modal-header">';
+        $modal .= '  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span></button>';
+        $modal .= '  <h4 class="modal-title" id="modalLabel">View</h4>';
+        $modal .= '</div>';
+        $modal .= '<div class="panel-body">';
+        $modal .= $this->renderAjax('view', ['model' => $this->findModel($id)]);
+        $modal .= '</div>';
+        $modal .= '<div class="modal-footer">';
+        $modal .= '    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
+        $modal .= '</div>';
+        return $modal;
+    } else {
+        return $this->render('view', [
+            'model' => $this->findModel($id),
+        ]);
+    }
+}
+</code>
+In the view ''index'', add some AJAX code:
+<code php>
+<?php
+use yii\helpers\Html;
+use yii\grid\GridView;
+use yii\widgets\Pjax;
+?>
+<div class="price-index">
+    <!-- // ... -->
+<?php Pjax::begin(); ?>
+    <?= GridView::widget([
+        'dataProvider' => $dataProvider,
+        'filterModel' => $searchModel,
+        'columns' => [
+            ['class' => 'yii\grid\SerialColumn'],
+            'id',
+            'item_code',
+            'description',
+            //...
+            //['class' => 'yii\grid\ActionColumn'],
+            [
+                'class' => 'yii\grid\ActionColumn',
+                'buttons' => [
+                    'view' => function ($url, $model) {
+                         return Html::a('<span class="glyphicon glyphicon-eye-open"></span>',
+                           $url, ['class' => 'modal-view', 'data-pjax' => '0']
+                         );
+                    },
+                    'update' => function ($url, $model) {
+                         return Html::a('<span class="glyphicon glyphicon-pencil"></span>',
+                           $url, ['class' => 'modal-update', 'data-pjax' => '0']
+                         );
+                    },
+                ],
+            ],
+        ],
+    ]); ?>
+    <?php
+        $this->registerJs(
+            "$(document).on('ready pjax:success', function() {  // 'pjax:success' when using pjax
+                $('.modal-view').click(function(e){
+                   e.preventDefault();
+                   $('#modalView').modal('show')
+                       .find('.modal-content')
+                       .load($(this).attr('href'));
+               });
+               $('.modal-update').click(function(e){
+                   e.preventDefault();
+                   $('#modalUpdate').modal('show')
+                       .find('.modal-content')
+                       .load($(this).attr('href'));
+               });
+           });
+        ");
+        yii\bootstrap\Modal::begin([
+            'id'           => 'modalView',
+            'header'       => '<b>' . Yii::t('app', 'View') . '</b>',
+            'footer'       => Html::submitButton(Yii::t('app', 'Close')),
+            //'toggleButton' => [
+            //   'label' => '<span class="glyphicon glyphicon-eye-open"></span>',
+            //   'href'  => yii\helpers\Url::to(['view'])
+            //],
+            'size' => yii\bootstrap\Modal::SIZE_LARGE,
+        ]);
+        echo "<div id='modal-content'></div>";
+        yii\bootstrap\Modal::end();
+        yii\bootstrap\Modal::begin([
+            'id'           => 'modalUpdate',
+            'header'       => '<b>' . Yii::t('app', 'Update') . '</b>',
+            'footer'       => Html::submitButton(Yii::t('app', 'Close')),
+            //'toggleButton' => [
+            //   'label' => '<span class="glyphicon glyphicon-pencil"></span>',
+            //   'href'  => yii\helpers\Url::to(['update'])
+            //],
+            echo "<div id='modal-content'></div>";
+            'size' => yii\bootstrap\Modal::SIZE_LARGE,
+        ]);
+        yii\bootstrap\Modal::end();
+    ?>
+<?php Pjax::end(); ?>
+</div>
+</code>
 == Modal Confirmation (called from GridView action) ==
@@ Line 279: / Line 402: @@
                 $.post({
                     url:'". Yii::$app->homeUrl ."price/delete-selected',
-                    dataType: 'json',
                     data: {keylist: keys},
                     success: function( data ) {
@@ Line 287: / Line 409: @@
                         console.log(data.data_post);
                         console.log(data.data_get);
-                    }
+                    },
+                    dataType: 'json'  // return data type
                 });
             } else {
@@ Line 356: / Line 479: @@
     'showFooter' => true,
 ]) ?>
+<?php
+    // Modal for Delete
+    yii\bootstrap\Modal::begin([
+        'id'     => 'modalConfirmDelete',
+        'header' => '<b>' . Yii::t('app', 'Delete') . '</b>',
+        'footer' =>
+            Html::submitButton(Yii::t('app', 'Delete'), [
+                'class' => 'btn btn-danger',  'data-dismiss' => 'modal', 'data-action' =>'Delete'
+            ]) . " " .
+            Html::submitButton(Yii::t('app', 'Cancel'), [
+                'class' => 'btn btn-default', 'data-dismiss' => 'modal', 'data-action' =>'Cancel'
+            ]),
+        //'toggleButton' => ['label' => '<span class="fa fa-trash-o"></span>', 'href' => yii\helpers\Url::to(['delete-selected'])],
+        'size' => yii\bootstrap\Modal::SIZE_SMALL,
+    ]);
+    echo "<div id='modal-content'>";
+    echo "  <p>### Delete selected records?</p>";
+    echo "</div>";
+    yii\bootstrap\Modal::end();
+?>
 <?php
@@ Line 385: / Line 529: @@
                 $.post({
                     url:'". Yii::$app->homeUrl ."price/delete-selected',
-                    dataType: 'json',
                     data: {keylist: keys},
                     success: function( data ) {
@@ Line 393: / Line 536: @@
                         console.log(data.data_post);
                         console.log(data.data_get);
-                    }
+                    },
+                    dataType: 'json',  // return data type
                 });
             } else {
@@ Line 400: / Line 544: @@
         }
     ", \yii\web\View::POS_END);
-?>
-<?php
-    // Modal for Delete
-    yii\bootstrap\Modal::begin([
-        'id'     => 'modalConfirmDelete',
-        'header' => '<b>' . Yii::t('app', 'Delete') . '</b>',
-        'footer' =>
-            Html::submitButton(Yii::t('app', 'Delete'), [
-                'class' => 'btn btn-danger',  'data-dismiss' => 'modal', 'data-action' =>'Delete'
-            ]) . " " .
-            Html::submitButton(Yii::t('app', 'Cancel'), [
-                'class' => 'btn btn-default', 'data-dismiss' => 'modal', 'data-action' =>'Cancel'
-            ]),
-        //'toggleButton' => ['label' => '<span class="fa fa-trash-o"></span>', 'href' => yii\helpers\Url::to(['delete-selected'])],
-        'size' => yii\bootstrap\Modal::SIZE_SMALL,
-    ]);
-    echo "<div id='modal-content'>";
-    echo "  <p>### Delete selected records?</p>";
-    echo "</div>";
-    yii\bootstrap\Modal::end();
 ?>
 </code>