Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
systems:yii2:modal_window [2018/05/31 15:25] smayr [GridView Field with Popup] |
systems:yii2:modal_window [2018/05/31 16:04] (current) smayr [Modal Confirmation (called from GridView action)] |
||
---|---|---|---|
Line 26: | Line 26: | ||
</ | </ | ||
- | == GridView with Modal == | + | == Modal with Image == |
- | To add a modal window (popup) from the '' | + | |
- | + | ||
- | Add '' | + | |
<code php> | <code php> | ||
- | public function actionView($id) | + | <?php |
- | { | + | // |
- | | + | |
- | $modal = ''; | + | // |
- | | + | $itemImage |
- | $modal .= ' | + | |
- | <span aria-hidden="true">& | + | '' |
- | | + | ); |
- | | + | |
- | | + | // |
- | | + | // Image Thumbnail |
- | | + | //------------------------ |
- | $modal .= '<div class=" | + | if(!empty($itemImage)) { |
- | $modal .= ' | + | |
- | $modal .= '</div>'; | + | |
- | return $modal; | + | |
} else { | } else { | ||
- | | + | |
- | | + | |
- | ]); | + | |
} | } | ||
- | } | ||
- | </ | ||
- | In the view '' | ||
- | <code php> | ||
- | <?php | ||
- | use yii\helpers\Html; | + | echo Html:: |
- | use yii\grid\GridView; | + | |
- | use yii\widgets\Pjax; | + | ); |
- | ?> | + | // |
- | <div class=" | + | // Modal to view image |
- | <!-- // ... --> | + | |
- | <?php Pjax::begin(); ?> | + | |
- | <?= GridView:: | + | 'header' => '<h4>Item Image</h4>', |
- | 'dataProvider' => $dataProvider, | + | 'size' |
- | | + | 'toggleButton' => [ |
- | ' | + | 'label' => '<i class=" |
- | [' | + | ' |
- | + | ||
- | ' | + | |
- | ' | + | |
- | ' | + | |
- | | + | |
- | + | ||
- | // | + | |
- | [ | + | |
- | | + | |
- | 'buttons' => [ | + | |
- | 'view' => function ($url, $model) { | + | |
- | | + | |
- | $url, ['class' => ' | + | |
- | ); | + | |
- | }, | + | |
- | ' | + | |
- | | + | |
- | $url, [' | + | |
- | ); | + | |
- | }, | + | |
- | ], | + | |
- | ], | + | |
], | ], | ||
- | ]); ?> | + | ]); |
- | | + | |
- | $this-> | + | echo "< |
- | "$(document).on(' | + | } else { |
- | | + | |
- | e.preventDefault(); | + | |
- | $('# | + | } |
- | | + | echo '<div class=" |
- | | + | |
- | }); | + | |
- | | + | |
- | | + | |
- | $('# | + | |
- | | + | |
- | | + | |
- | | + | |
- | }); | + | |
- | "); | + | |
- | + | ||
- | yii\bootstrap\Modal:: | + | |
- | ' | + | |
- | ' | + | |
- | | + | |
- | | + | |
- | // | + | |
- | // ' | + | |
- | //], | + | |
- | ' | + | |
- | ]); | + | |
- | yii\bootstrap\Modal:: | + | |
- | | + | |
- | yii\bootstrap\Modal:: | + | |
- | ' | + | |
- | ' | + | |
- | ' | + | |
- | //' | + | |
- | // ' | + | |
- | // ' | + | |
- | //], | + | |
- | ' | + | |
- | ]); | + | |
- | + | ||
- | yii\bootstrap\Modal:: | + | |
- | | + | |
- | + | ||
- | <?php Pjax:: | + | |
- | </ | + | |
+ | yii\bootstrap\Modal:: | ||
+ | ?> | ||
</ | </ | ||
- | == GridView Field with Modal == | + | == Modal Content (called from GridView field) |
<code php> | <code php> | ||
Line 216: | Line 148: | ||
</ | </ | ||
- | == Modal with Image == | ||
- | <code php> | ||
- | <?php | ||
- | // | ||
- | // Image | ||
- | // | ||
- | $itemImage = (!empty($model-> | ||
- | Yii:: | ||
- | '' | ||
- | ); | ||
- | | ||
- | // | ||
- | // Image Thumbnail | ||
- | // | ||
- | if(!empty($itemImage)) { | ||
- | echo "< | ||
- | } else { | ||
- | echo "< | ||
- | base64_encode(\app\models\Tool:: | ||
- | } | ||
- | |||
- | |||
- | echo Html:: | ||
- | [' | ||
- | ); | ||
- | |||
- | // | ||
- | // Modal to view image | ||
- | // | ||
- | yii\bootstrap\Modal:: | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ], | ||
- | ]); | ||
- | |||
- | if(!empty($itemImage)) { | ||
- | echo "< | ||
- | } else { | ||
- | echo "< | ||
- | base64_encode(\app\models\Tool:: | ||
- | } | ||
- | echo '< | ||
- | echo ' | ||
- | echo '</ | ||
- | |||
- | yii\bootstrap\Modal:: | ||
- | ?> | ||
- | </ | ||
- | == Modal called from GridView == | + | == Modal View (called from GridView |
Modal to view or update a record, called from a '' | Modal to view or update a record, called from a '' | ||
<code php> | <code php> | ||
Line 287: | Line 168: | ||
' | ' | ||
' | ' | ||
- | | + | |
}, | }, | ||
' | ' | ||
- | | + | |
}, | }, | ||
], | ], | ||
Line 346: | Line 227: | ||
See also: [[http:// | See also: [[http:// | ||
- | == Modal confirmation | + | === Modal View (called from GridView |
+ | To add a modal window (popup) from the '' | ||
+ | |||
+ | Add '' | ||
+ | <code php> | ||
+ | public function actionView($id) | ||
+ | { | ||
+ | if (Yii:: | ||
+ | $modal = ''; | ||
+ | $modal .= '< | ||
+ | $modal .= ' | ||
+ | <span aria-hidden=" | ||
+ | $modal .= ' | ||
+ | $modal .= '</ | ||
+ | $modal .= '< | ||
+ | $modal .= $this-> | ||
+ | $modal .= '</ | ||
+ | $modal .= '< | ||
+ | $modal .= ' | ||
+ | $modal .= '</ | ||
+ | return $modal; | ||
+ | } else { | ||
+ | return $this-> | ||
+ | ' | ||
+ | ]); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | In the view '' | ||
+ | <code php> | ||
+ | <?php | ||
+ | |||
+ | use yii\helpers\Html; | ||
+ | use yii\grid\GridView; | ||
+ | use yii\widgets\Pjax; | ||
+ | |||
+ | ?> | ||
+ | <div class=" | ||
+ | <!-- // ... --> | ||
+ | <?php Pjax:: | ||
+ | <?= GridView:: | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | [' | ||
+ | |||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | //... | ||
+ | |||
+ | // | ||
+ | [ | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | | ||
+ | $url, [' | ||
+ | ); | ||
+ | }, | ||
+ | ' | ||
+ | | ||
+ | $url, [' | ||
+ | ); | ||
+ | }, | ||
+ | ], | ||
+ | ], | ||
+ | ], | ||
+ | ]); ?> | ||
+ | |||
+ | <?php | ||
+ | $this-> | ||
+ | " | ||
+ | $(' | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | }); | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | }); | ||
+ | }); | ||
+ | "); | ||
+ | |||
+ | yii\bootstrap\Modal:: | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | //' | ||
+ | // ' | ||
+ | // ' | ||
+ | //], | ||
+ | ' | ||
+ | ]); | ||
+ | echo "< | ||
+ | yii\bootstrap\Modal:: | ||
+ | |||
+ | yii\bootstrap\Modal:: | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | //' | ||
+ | // ' | ||
+ | // ' | ||
+ | //], | ||
+ | echo "< | ||
+ | ' | ||
+ | ]); | ||
+ | |||
+ | yii\bootstrap\Modal:: | ||
+ | ?> | ||
+ | |||
+ | <?php Pjax:: | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | == 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:'" | url:'" | ||
- | dataType: ' | ||
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: ' | ||
}); | }); | ||
} else { | } else { | ||
Line 475: | Line 479: | ||
' | ' | ||
]) ?> | ]) ?> | ||
+ | |||
+ | <?php | ||
+ | // Modal for Delete | ||
+ | yii\bootstrap\Modal:: | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | Html:: | ||
+ | ' | ||
+ | ]) . " " . | ||
+ | Html:: | ||
+ | ' | ||
+ | ]), | ||
+ | //' | ||
+ | ' | ||
+ | ]); | ||
+ | echo "< | ||
+ | echo " | ||
+ | echo "</ | ||
+ | yii\bootstrap\Modal:: | ||
+ | ?> | ||
<?php | <?php | ||
Line 504: | Line 529: | ||
$.post({ | $.post({ | ||
url:'" | url:'" | ||
- | dataType: ' | ||
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: ' | ||
}); | }); | ||
} else { | } else { | ||
Line 519: | Line 544: | ||
} | } | ||
", \yii\web\View:: | ", \yii\web\View:: | ||
- | ?> | ||
- | |||
- | <?php | ||
- | // Modal for Delete | ||
- | yii\bootstrap\Modal:: | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | Html:: | ||
- | ' | ||
- | ]) . " " . | ||
- | Html:: | ||
- | ' | ||
- | ]), | ||
- | //' | ||
- | ' | ||
- | ]); | ||
- | echo "< | ||
- | echo " | ||
- | echo "</ | ||
- | yii\bootstrap\Modal:: | ||
?> | ?> | ||
</ | </ |