Differences

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

--- systems:yii2:modal_window [2018/05/31 15:16]
smayr [Confirmation Dialog]
+++ systems:yii2:modal_window [2018/05/31 16:04] (current)
smayr [Modal Confirmation (called from GridView action)]
@@ Line 26: / Line 26: @@
 </code>
-== In View ''index'', Display View ''view'' as Modal ==
+== Modal with Image ==
+<code php>
+<?php
+    //------------------------
+    // Image
+    //------------------------
+    $itemImage = (!empty($model->image_file) ?
+        Yii::$app->homeUrl . 'img/data/' . Yii::$app->controller->id . "/{$model->image_file}" :
+        ''
+    );
+    //------------------------
+    // Image Thumbnail
+    //------------------------
+    if(!empty($itemImage)) {
+        echo "<img class='img-thumbnail' src='{$itemImage}' alt='Item Image'>";
+    } else {
+        echo "<img class='img-thumbnail' src='data:image/png;base64," .
+            base64_encode(\app\models\Tool::generateEmptyPng()) . "'/>";
+    }
+    echo Html::a('<i class="fa fa-plus" aria-hidden="true"></i> ' . Yii::t('app', 'Add Image'),
+        ['upload-image', 'id' => $model->id], ['class' => 'btn btn-default']
+    );
+    //------------------------
+    // Modal to view image
+    //------------------------
+    yii\bootstrap\Modal::begin([
+        'header' => '<h4>Item Image</h4>',
+        'size'   => yii\bootstrap\Modal::SIZE_LARGE,
+        'toggleButton' => [
+            'label' => '<i class="fa fa-image" aria-hidden="true"></i> ' . Yii::t('app', 'View Image'),
+            'class' => 'btn btn-default'
+        ],
+    ]);
+    if(!empty($itemImage)) {
+        echo "<img class='img-fluid' src='{$itemImage}' alt='Item Image'>";
+    } else {
+        echo "<img class='img-fluid' src='data:image/png;base64," .
+            base64_encode(\app\models\Tool::generateEmptyPng()) . "'/>";
+    }
+    echo '<div class="modal-footer">';
+    echo '    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
+    echo '</div>';
+    yii\bootstrap\Modal::end();
+?>
+</code>
+== Modal Content (called from GridView field) ==
+<code php>
+<?php Pjax::begin(); ?>
+    <?= GridView::widget([
+        'dataProvider' => $dataProvider,
+        'filterModel' => $searchModel,
+        'columns' => [
+            ['class' => 'yii\grid\SerialColumn'],
+            'id',
+            'account_number',
+            'contact',
+            'company_name',
+             //...
+            [   // use Modal window to display Notes
+                'attribute' => 'notes',
+                'label'     => 'Notes',
+                'format'    => ['raw'],
+                'value'     => function($data) {
+                    if (!empty($data["notes"])) {
+                        $str = '
+                            <!-- Button trigger modal -->
+                            <button type="button"
+                               class="btn btn-default btn-sm"
+                                  data-toggle="modal"
+                                  data-target="#modalNotes'.$data['id'].'">
+                              <span class="glyphicon glyphicon-option-horizontal"></span>
+                            </button>
+                            <!-- Modal -->
+                            <div class="modal fade" id="modalNotes'.$data['id'].'"
+                                 tabindex="-1"
+                                 role="dialog"
+                                 aria-labelledby="modalLabel'.$data['id'].'">
+                              <div class="modal-dialog modal-lg" role="document">
+                                <div class="modal-content">
+                                  <div class="modal-header">
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                    <h4 class="modal-title" id="modalLabel'.$data['id'].'">Notes</h4>
+                                  </div>
+                                  <div class="modal-body">
+                                    <pre>'. $data['notes'] . '</pre>
+                                  </div>
+                                  <div class="modal-footer">
+                                    <button type="button"
+                                       class="btn btn-default" data-dismiss="modal">Close</button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>';
+                    } else {
+                        $str = "";
+                    }
+                    return ($str);
+                },
+                //'filter' => ['' => 'All', 1 => 'With Notes']
+            ],
+            ['class' => 'yii\grid\ActionColumn'],
+        ],
+    ]); ?>
+<?php Pjax::end(); ?>
+</code>
+== Modal View (called from GridView action) ==
+Modal to view or update a record, called from a ''GridView'':
+<code php>
+<?= yii\grid\GridView::widget([
+    'dataProvider' => $dataProviderPrice,
+    'filterModel'  => $searchModelPrice,
+    'tableOptions' => ['class' => 'table table-striped table-bordered table-hover'],
+    'columns' => [
+        // record number column
+        ['class' => 'yii\grid\SerialColumn'],
+        'id',
+        'item_code',
+        'description',
+        //['class' => 'yii\grid\ActionColumn'],
+        [
+            'class' => 'yii\grid\ActionColumn',
+            //'template' => '{view} {update} {delete}',
+            'buttons' => [
+                'view' => function ($url, $model) {
+                     return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url , ['class' => 'view']);
+                },
+                'update' => function ($url, $model) {
+                     return Html::a('<span class="glyphicon glyphicon-pencil"></span>', $url , ['class' => 'update']);
+                },
+            ],
+        ],
+    ],
+]) ?>
+<?php
+    // Attach click events to buttons 'View' and 'Update'
+    $this->registerJs(
+        "$(document).ready(function() {
+            $('.view').click(function(e){
+               e.preventDefault();
+               $('#modalView').modal('show')
+                   .find('.modal-content')
+                   .load($(this).attr('href'));
+           });
+           $('.update').click(function(e){
+               e.preventDefault();
+               $('#modalUpdate').modal('show')
+                   .find('.modal-content')
+                   .load($(this).attr('href'));
+           });
+       });
+    ");
+?>
+<?php
+    // Modal for VIEW
+    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();
+?>
+<?php
+    // Modal for UPDATE
+    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'])],
+        'size' => yii\bootstrap\Modal::SIZE_LARGE,
+    ]);
+    echo "<div id='modal-content'></div>";
+    yii\bootstrap\Modal::end();
+?>
+</code>
+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:
@@ Line 125: / Line 326: @@
             'size' => yii\bootstrap\Modal::SIZE_LARGE,
         ]);
+        echo "<div id='modal-content'></div>";
         yii\bootstrap\Modal::end();
@@ Line 135: / Line 337: @@
             //   'href'  => yii\helpers\Url::to(['update'])
             //],
+            echo "<div id='modal-content'></div>";
             'size' => yii\bootstrap\Modal::SIZE_LARGE,
         ]);
@@ Line 147: / Line 350: @@
-== GridView Field with Popup ==
+== Modal Confirmation (called from GridView action) ==
-<code php>
-<?php Pjax::begin(); ?>
-    <?= GridView::widget([
-        'dataProvider' => $dataProvider,
-        'filterModel' => $searchModel,
-        'columns' => [
-            ['class' => 'yii\grid\SerialColumn'],
-            'id',
-            'account_number',
-            'contact',
-            'company_name',
-             //...
-            [   // use Modal window to display Notes
-                'attribute' => 'notes',
-                'label'     => 'Notes',
-                'format'    => ['raw'],
-                'value'     => function($data) {
-                    if (!empty($data["notes"])) {
-                        $str = '
-                            <!-- Button trigger modal -->
-                            <button type="button"
-                               class="btn btn-default btn-sm"
-                                  data-toggle="modal"
-                                  data-target="#modalNotes'.$data['id'].'">
-                              <span class="glyphicon glyphicon-option-horizontal"></span>
-                            </button>
-                            <!-- Modal -->
-                            <div class="modal fade" id="modalNotes'.$data['id'].'"
-                                 tabindex="-1"
-                                 role="dialog"
-                                 aria-labelledby="modalLabel'.$data['id'].'">
-                              <div class="modal-dialog modal-lg" role="document">
-                                <div class="modal-content">
-                                  <div class="modal-header">
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                        <span aria-hidden="true">&times;</span>
-                                    </button>
-                                    <h4 class="modal-title" id="modalLabel'.$data['id'].'">Notes</h4>
-                                  </div>
-                                  <div class="modal-body">
-                                    <pre>'. $data['notes'] . '</pre>
-                                  </div>
-                                  <div class="modal-footer">
-                                    <button type="button"
-                                       class="btn btn-default" data-dismiss="modal">Close</button>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>';
-                    } else {
-                        $str = "";
-                    }
-                    return ($str);
-                },
-                //'filter' => ['' => 'All', 1 => 'With Notes']
-            ],
-            ['class' => 'yii\grid\ActionColumn'],
-        ],
-    ]); ?>
-<?php Pjax::end(); ?>
-</code>
-== Confirmation Dialog ==
 Example of confirmation dialog in a view:
 <code php>
@@ Line 267: / Line 402: @@
                 $.post({
                     url:'". Yii::$app->homeUrl ."price/delete-selected',
-                    dataType: 'json',
                     data: {keylist: keys},
                     success: function( data ) {
@@ Line 275: / Line 409: @@
                         console.log(data.data_post);
                         console.log(data.data_get);
-                    }
+                    },
+                    dataType: 'json'  // return data type
                 });
             } else {
@@ Line 344: / 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 373: / Line 529: @@
                 $.post({
                     url:'". Yii::$app->homeUrl ."price/delete-selected',
-                    dataType: 'json',
                     data: {keylist: keys},
                     success: function( data ) {
@@ Line 381: / Line 536: @@
                         console.log(data.data_post);
                         console.log(data.data_get);
-                    }
+                    },
+                    dataType: 'json',  // return data type
                 });
             } else {
@@ Line 388: / 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>