Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
systems:yii2:modal_window [2018/05/31 15:21]
smayr [Modal confirmation called from GridView] 		systems:yii2:modal_window [2018/05/31 16:04] (current)
smayr [Modal Confirmation (called from GridView action)]
Line 26: Line 26:
 </code> </code>
  
-== In View ''index'', Display View ''view'' as Modal == +== Modal with Image ==
-To add a modal window (popup) from the ''index'' view actions: +
- +
-Add ''renderAjax()'' call to your action:+
 <code php> <code php>
-public function actionView($id) +<?php 
-{ +    //------------------------ 
-    if (Yii::$app->request->isAjax) { +    // Image 
-        $modal = ''; +    //------------------------ 
-        $modal .= '<div class="modal-header">'; +    $itemImage = (!empty($model->image_file) ?  
-        $modal .= '  <button type="button" class="close" data-dismiss="modal" aria-label="Close"> +        Yii::$app->homeUrl . 'img/data/' . Yii::$app->controller->id . "/{$model->image_file}" :  
-            <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)]); +    // Image Thumbnail 
-        $modal .= '</div>'; +    //------------------------ 
-        $modal .= '<div class="modal-footer">'; +    if(!empty($itemImage)) { 
-        $modal .= '    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'; +        echo "<img class='img-thumbnail' src='{$itemImage}' alt='Item Image'>";
-        $modal .= '</div>'; +
-        return $modal;+
     } else {     } else {
-        return $this->render('view', [ +        echo "<img class='img-thumbnail' src='data:image/png;base64," .  
-            'model' => $this->findModel($id), +            base64_encode(\app\models\Tool::generateEmptyPng()) . "'/>";
-        ]);+
     }     }
-} 
-</code> 
  
-In the view ''index'', add some AJAX code: 
-<code php> 
-<?php 
  
-use yii\helpers\Html; +    echo Html::a('<i class="fa fa-plus" aria-hidden="true"></i> ' . Yii::t('app', 'Add Image'),  
-use yii\grid\GridView; +        ['upload-image', 'id' => $model->id], ['class' => 'btn btn-default'] 
-use yii\widgets\Pjax;+    );
  
-?> +    //------------------------ 
-<div class="price-index"> +    // Modal to view image  
-    <!-- // ... --> +    //------------------------ 
-<?php Pjax::begin(); ?>     +    yii\bootstrap\Modal::begin([ 
-    <?= GridView::widget([ +        'header' => '<h4>Item Image</h4>', 
-        'dataProvider' => $dataProvider, +        'size'   => yii\bootstrap\Modal::SIZE_LARGE, 
-        'filterModel' => $searchModel, +        'toggleButton' => [ 
-        'columns' => [ +            'label' => '<i class="fa fa-image" aria-hidden="true"></i> ' . Yii::t('app', 'View Image'),  
-            ['class' => 'yii\grid\SerialColumn'], +            'class' => 'btn btn-default'
- +
-            '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 +    if(!empty($itemImage)) { 
-        $this->registerJs( +        echo "<img class='img-fluid' src='{$itemImage}' alt='Item Image'>"; 
-            "$(document).on('ready pjax:success', function() {  // 'pjax:success' when using pjax +    } else { 
-                $('.modal-view').click(function(e){ +        echo "<img class='img-fluid' src='data:image/png;base64," .  
-                   e.preventDefault(); +            base64_encode(\app\models\Tool::generateEmptyPng()) . "'/>"; 
-                   $('#modalView').modal('show') +    } 
-                       .find('.modal-content') +    echo '<div class="modal-footer">'; 
-                       .load($(this).attr('href')); +    echo '    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>'; 
-               }); +    echo '</div>';
-               $('.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, +
-        ]); +
-        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']) +
-            //], +
-            'size' => yii\bootstrap\Modal::SIZE_LARGE, +
-        ]); +
-             +
-        yii\bootstrap\Modal::end(); +
-    ?> +
-  +
-<?php Pjax::end(); ?> +
-</div>+
  
 +    yii\bootstrap\Modal::end();  
 +?>
 </code> </code>
  
  
-== GridView Field with Popup ==+== Modal Content (called from GridView field) ==
  
 <code php> <code php>
Line 216: Line 148:
 </code> </code>
  
-== 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 called from GridView ====+== Modal View (called from GridView action) ==
 Modal to view or update a record, called from a ''GridView'': Modal to view or update a record, called from a ''GridView'':
 <code php> <code php>
Line 287: Line 168:
             'buttons' => [             'buttons' => [
                 'view' => function ($url, $model) {                 'view' => function ($url, $model) {
-                     return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url , ['class' => 'view', 'data-pjax' => '1']);+                     return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url , ['class' => 'view']);
                 },                 },
                 'update' => function ($url, $model) {                 'update' => function ($url, $model) {
-                     return Html::a('<span class="glyphicon glyphicon-pencil"></span>', $url , ['class' => 'update', 'data-pjax' => '0']);+                     return Html::a('<span class="glyphicon glyphicon-pencil"></span>', $url , ['class' => 'update']);
                 },                 },
             ],             ],
Line 346: Line 227:
 See also: [[http://techbloghunting.com/2017/05/17/yii2-bootstrap-modal/|Yii2 Bootstrap Modal]] See also: [[http://techbloghunting.com/2017/05/17/yii2-bootstrap-modal/|Yii2 Bootstrap Modal]]
  
-==== Modal confirmation called from GridView ====+=== 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) ==
  
 Example of confirmation dialog in a view: Example of confirmation dialog in a view:
Line 398: Line 402:
                 $.post({                  $.post({ 
                     url:'". Yii::$app->homeUrl ."price/delete-selected',                      url:'". Yii::$app->homeUrl ."price/delete-selected', 
-                    dataType: 'json', 
                     data: {keylist: keys},                     data: {keylist: keys},
                     success: function( data ) {                     success: function( data ) {
Line 406: Line 409:
                         console.log(data.data_post);                         console.log(data.data_post);
                         console.log(data.data_get);                         console.log(data.data_get);
-                    }+                    }, 
 +                    dataType: 'json'  // return data type
                 });                 });
             } else {             } else {
Line 475: Line 479:
     'showFooter' => true,     '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 <?php
Line 504: Line 529:
                 $.post({                  $.post({ 
                     url:'". Yii::$app->homeUrl ."price/delete-selected',                      url:'". Yii::$app->homeUrl ."price/delete-selected', 
-                    dataType: 'json', 
                     data: {keylist: keys},                     data: {keylist: keys},
                     success: function( data ) {                     success: function( data ) {
Line 512: Line 536:
                         console.log(data.data_post);                         console.log(data.data_post);
                         console.log(data.data_get);                         console.log(data.data_get);
-                    }+                    }, 
 +                    dataType: 'json',  // return data type
                 });                 });
             } else {             } else {
Line 519: Line 544:
         }         }
     ", \yii\web\View::POS_END);     ", \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> </code>
systems/yii2/modal_window.1527794513.txt.gz · Last modified: 2018/05/31 15:21 by smayr
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International


  • Show page
  • Old revisions
  • Backlinks
  • Recent Changes
  • Media Manager
  • Sitemap