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:examples [2018/05/31 14:55]
smayr [Modal confirmation called from GridView] 		systems:yii2:examples [2018/10/04 17:05] (current)
ajdavis [Copy to Clipboard using Javascript]
Line 989: Line 989:
 <code php> <code php>
 <?php  <?php 
-use yii\helpers\Url; +    // Method 1: Button 
-... +    \yii\helpers\Html::button('Privacy Policy', [ 
-    // Method 1 +        'id'    => 'btnPrivacyPolicy', 
-    echo Html::a('Privacy Policy', ['site/privacy']);+        'class' => 'btn btn-default btn-sm', 
 +    ]); 
 +                 
 +    // Method 2: Link styled as button 
 +    echo \yii\helpers\Html::a('Privacy Policy', ['site/privacy']);
  
-    // Method 2 +    // Method 3: Link styled as button 
-    $url = urldecode(Url::toRoute(['site/privacy'])); +    $url = urldecode(\yii\helpers\Url::toRoute(['site/privacy'])); 
-    echo Html::a('Privacy Policy', $url);+    echo \yii\helpers\Html::a('Privacy Policy', $url);
          
-    // Method 3 +    // Method 4: Link styled as button 
-    echo Url::to(['site/privacy']); +    echo \yii\helpers\Url::to(['site/privacy']); 
 ?> ?>
 </code> </code>
Line 1526: Line 1530:
  
 === Modal Window === === Modal Window ===
- +  * See: [[systems:yii2:Modal Window]]
-<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 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', 'data-pjax' => '1']); +
-                }, +
-                'update' => function ($url, $model) { +
-                     return Html::a('<span class="glyphicon glyphicon-pencil"></span>', $url , ['class' => 'update', 'data-pjax' => '0']); +
-                }, +
-            ], +
-        ],  +
-    ], +
-]) ?> +
- +
-<?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 confirmation called from GridView ==== +
-Example of confirmation dialog in a view: +
-<code php> +
-<?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'], +
-        [   // Checkboxes to delete selection +
-            'class' => 'yii\grid\CheckboxColumn', +
-           'footer' => getDeleteConfirmationDialog(),  // Call Modal dialog +
-        ],   +
-    ], +
-    'showFooter' => true, +
-]) ?> +
- +
-<?php +
-    // Add Javascript code to perform AJAX call (using JQuery) +
-    $this->registerJs( +
-        "$(document).ready(function() { +
-             +
-            $('#modalConfirmDelete').on('hide.bs.modal', function (event) { +
-                var activeElement = $(document.activeElement); +
-                if (activeElement.is('[data-toggle], [data-dismiss]')) { +
-                    console.log(activeElement); +
-                    console.log('Button : ' + activeElement[0].textContent); +
-                    var action = activeElement[0].textContent; +
-                    switch(action) { +
-                        case 'Delete': console.log('Deleting selected records. Action: ' + action); delSelected(); break; +
-                        case 'Cancel': console.log('Canceled deletion. Action: ' + action); break; +
-                        default:       console.log('Nothing to be deleted. Action: ' + action); break; +
-                    } +
-                } +
-            }); +
-             +
-        }); +
-     +
-        function delSelected() +
-        { +
-            if ( $( '#w5' ).length ) { +
-                var keys = $('#w5').yiiGridView('getSelectedRows'); // #w5 = col 5 in GridView for checkboxes +
-                console.log('Keys selected for deletion: ' + keys); +
-                $.post({  +
-                    url:'". Yii::$app->homeUrl ."price/delete-selected',  +
-                    dataType: 'json', +
-                    data: {keylist: keys}, +
-                    success: function( data ) { +
-                        console.log('Data Received: '); +
-                        console.log(data.status); +
-                        console.log(data.details); +
-                        console.log(data.data_post); +
-                        console.log(data.data_get); +
-                    } +
-                }); +
-            } else { +
-                alert('No items available/selected for deletion.'); +
-            } +
-        } +
-    ", \yii\web\View::POS_END); +
-?> +
- +
-<?php +
-function getDeleteConfirmationDialog() +
-{ +
-    $str = ''; +
-    $str .= '<!-- Button trigger modal -->'; +
-    $str .= '<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modalConfirmDelete">'; +
-    $str .= '  <span class="fa fa-trash-o" aria-hidden="true"></span>'; +
-    $str .= '</button>'; +
-    $str .= ''; +
-     +
-    $str .= '<!-- Modal -->'; +
-    $str .= '<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="modalLabelConfirmDelete">'; +
-    $str .= '  <div class="modal-dialog modal-sm" role="document">'; +
-    $str .= '    <div class="modal-content">'; +
-    $str .= '      <div class="modal-header">'; +
-    $str .= '        <button type="button" class="close" data-dismiss="modal" aria-label="Close">'; +
-    $str .= '          <span aria-hidden="true">&times;</span>'; +
-    $str .= '        </button>'; +
-    $str .= '        <h4 class="modal-title" id="modalLabelConfirmDelete">Delete</h4>'; +
-    $str .= '      </div>'; +
-    $str .= '      <div class="modal-body"><p>Delete selected records?</p></div>'; +
-    $str .= '      <div class="modal-footer">'; +
-    $str .= '          <button type="button" class="btn btn-alert" data-dismiss="modal">Delete</button>'; +
-    $str .= '          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>'; +
-    $str .= '      </div>'; +
-    $str .= '    </div>'; +
-    $str .= '  </div>'; +
-    $str .= '</div>'; +
- +
-    return $str; +
-} +
-?> +
-</code> +
- +
-The previous modal definition within ''getDeleteConfirmationDialog()'' can be refactored at the end of the view as: +
-<code php> +
-<?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> +
- +
-In controller, add the action to call.  Eg: ''actionDeleteSelected()'' +
-<code php> +
-//... +
-class PriceController extends Controller +
-{ +
-    public function behaviors() +
-    { +
-        return [ +
-            'access' => [ +
-                'class' => AccessControl::className(), +
-                'rules' => [ +
-                    [ +
-                        'actions' => [ +
-                            'index', 'delete-selected', //...  +
-                        ], +
-                        'allow' => true, +
-                        'roles' => ['@'],  // @ = Authenticated users +
-                    ], +
-                    //... +
-                ], +
-            ], +
-            //... +
-        ]; +
-    } +
-     +
-    //... +
-     +
-    /** +
-     * Deletes selected Price models for specified customer. +
-     * @return mixed +
-     */ +
-    public function actionDeleteSelected() +
-    { +
-        if (Yii::$app->request->post('keylist')) { +
-            $keys = Yii::$app->request->post('keylist'); +
-            if (!is_array($keys)) { +
-                return \yii\helpers\Json::encode([ +
-                    'status'  => 'error', +
-                    'details' => 'Not an array', +
-                ]); +
-            } +
-             +
-            if (count($keys) > 0) { +
-                $model = $this->findModel($keys[0]); +
-                $customer_id = $model->customer_id; +
-                 +
-                // Method 1: Delete each record (using a loop) +
-                //foreach ($keys as $key => $id) { +
-                //    $model = $this->findModel($id); +
-                //    $model->delete(); +
-                //} +
-                 +
-                // Method 2: Delete each record (using single query) +
-                $result = (new \yii\db\Query) +
-                    ->createCommand() +
-                    ->delete('price', ['in', 'id', $keys]) +
-                    ->execute(); +
-                 +
-                // Return Method 1: JSON +
-                //return \yii\helpers\Json::encode([ +
-                //    'status'    => 'success', +
-                //    'details'   => "Deleted items:\n" . implode(", ", $keys), +
-                //]); +
-                 +
-                // Return Method 2: Redirect +
-                return $this->redirect(['customer/view', 'id' => $customer_id, 'tab'=>'price']); +
-            } +
-        } +
-        return \yii\helpers\Json::encode([ +
-            'status'    => 'error', +
-            'details'   => 'Not POST data', +
-        ]); +
-    } +
-</code> +
- +
-See also: +
-  * [[https://stackoverflow.com/questions/37473895/how-i-can-process-a-checkbox-column-from-yii2-gridview|Process checkbox column from Yii2 GridView]]+
  
  
Line 1986: Line 1658:
             'createdAtAttribute' => 'created_at', // OR 'create_time', to override default field name             'createdAtAttribute' => 'created_at', // OR 'create_time', to override default field name
             'updatedAtAttribute' => 'updated_at', // OR 'update_time', to override default field name             'updatedAtAttribute' => 'updated_at', // OR 'update_time', to override default field name
-            'value' => new \yii\db\Expression('NOW()'),+            'value' => new \yii\db\Expression('NOW()'),  // for PHP/SQL datetime field 
 +            //'value' => time(),                         // for epoch time (unix) field
         ],         ],
         [         [
Line 3286: Line 2959:
 $dataProviderPrice->pagination->pageSizeLimit   = false; $dataProviderPrice->pagination->pageSizeLimit   = false;
 </code>         </code>        
 +
 +== Copy to Clipboard using Javascript ==
 +
 + # Add a reference to the //ClipboardJS// library either by using Yii2 registerJsFile or adding the file to ''assets\AppAsset.php''
 + # Add javascript to your page that creates an instance of ClipboardJS:
 +<code php>$this->registerJs("var clipboard = new ClipboardJS('.btn-clip');", \yii\web\View::POS_END);</code>
 + # Add a button that follows this logic:
 +<code html>
 +<i class="fa fa-copy btn btn-default btn-clip" data-clipboard-text="value-to-copy"></i>
 +</code>
systems/yii2/examples.1527792900.txt.gz · Last modified: 2018/05/31 14:55 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