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:58]
smayr [Modal with Image] 		systems:yii2:modal_window [2018/05/31 16:04] (current)
smayr [Modal Confirmation (called from GridView action)]
Line 26: Line 26:
 </code> </code>
  
-== GridView Actions with 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, +
-        ]); +
-        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>+
  
 +    yii\bootstrap\Modal::end();  
 +?>
 </code> </code>
  
Line 296: Line 226:
  
 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 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) == == Modal Confirmation (called from GridView action) ==
Line 349: 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 357: 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 426: 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 455: 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 463: 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 470: 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.1527796685.txt.gz · Last modified: 2018/05/31 15:58 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