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 [GridView Actions with Modal]
systems:yii2:modal_window [2018/05/31 16:04] (current)
smayr [Modal Confirmation (called from GridView action)]
Line 76: Line 76:
     yii\bootstrap\Modal::end();       yii\bootstrap\Modal::end();  
 ?> ?>
-</code> 
- 
-== Modal Ajax View (called from GridView action) == 
-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> </code>
  
Line 348: 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 401: 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 409: 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 478: 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 507: 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 515: 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 522: 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>