= Html::button(Yii::t('app', 'Open'), [
// ...
'data' => [
'toggle' => 'modal',
'target' => '#modalPopup',
],
]) ?>
Create a modal using widget:
yii\bootstrap\Modal::begin([
'id' => '#modalPopup',
//...
]);
// Some modal content here
yii\bootstrap\Modal::end();
== Modal with Image ==
image_file) ?
Yii::$app->homeUrl . 'img/data/' . Yii::$app->controller->id . "/{$model->image_file}" :
''
);
//------------------------
// Image Thumbnail
//------------------------
if(!empty($itemImage)) {
echo "";
} else {
echo "";
}
echo Html::a(' ' . Yii::t('app', 'Add Image'),
['upload-image', 'id' => $model->id], ['class' => 'btn btn-default']
);
//------------------------
// Modal to view image
//------------------------
yii\bootstrap\Modal::begin([
'header' => 'Item Image
',
'size' => yii\bootstrap\Modal::SIZE_LARGE,
'toggleButton' => [
'label' => ' ' . Yii::t('app', 'View Image'),
'class' => 'btn btn-default'
],
]);
if(!empty($itemImage)) {
echo "";
} else {
echo "";
}
echo ' ';
yii\bootstrap\Modal::end();
?>
== Modal Content (called from GridView field) ==
= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'account_number',
'contact',
'company_name',
//...
[ // use Modal window to display Notes
'attribute' => 'notes',
'label' => 'Notes',
'format' => ['raw'],
'value' => function($data) {
if (!empty($data["notes"])) {
$str = '
';
} else {
$str = "";
}
return ($str);
},
//'filter' => ['' => 'All', 1 => 'With Notes']
],
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
== Modal View (called from GridView action) ==
Modal to view or update a record, called from a ''GridView'':
= 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('', $url , ['class' => 'view']);
},
'update' => function ($url, $model) {
return Html::a('', $url , ['class' => 'update']);
},
],
],
],
]) ?>
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'));
});
});
");
?>
'modalView',
'header' => '' . Yii::t('app', 'View') . '',
'footer' => Html::submitButton(Yii::t('app', 'Close')),
//'toggleButton' => ['label' => '', 'href' => yii\helpers\Url::to(['view'])],
'size' => yii\bootstrap\Modal::SIZE_LARGE,
]);
echo "";
yii\bootstrap\Modal::end();
?>
'modalUpdate',
'header' => '' . Yii::t('app', 'Update') . '',
'footer' => Html::submitButton(Yii::t('app', 'Close')),
//'toggleButton' => ['label' => '', 'href' => yii\helpers\Url::to(['update'])],
'size' => yii\bootstrap\Modal::SIZE_LARGE,
]);
echo "";
yii\bootstrap\Modal::end();
?>
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:
public function actionView($id)
{
if (Yii::$app->request->isAjax) {
$modal = '';
$modal .= '';
$modal .= ' ';
$modal .= ' View
';
$modal .= '';
$modal .= '';
$modal .= $this->renderAjax('view', ['model' => $this->findModel($id)]);
$modal .= '';
$modal .= ' ';
return $modal;
} else {
return $this->render('view', [
'model' => $this->findModel($id),
]);
}
}
In the view ''index'', add some AJAX code:
= 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('',
$url, ['class' => 'modal-view', 'data-pjax' => '0']
);
},
'update' => function ($url, $model) {
return Html::a('',
$url, ['class' => 'modal-update', 'data-pjax' => '0']
);
},
],
],
],
]); ?>
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' => '' . Yii::t('app', 'View') . '',
'footer' => Html::submitButton(Yii::t('app', 'Close')),
//'toggleButton' => [
// 'label' => '',
// 'href' => yii\helpers\Url::to(['view'])
//],
'size' => yii\bootstrap\Modal::SIZE_LARGE,
]);
echo "";
yii\bootstrap\Modal::end();
yii\bootstrap\Modal::begin([
'id' => 'modalUpdate',
'header' => '' . Yii::t('app', 'Update') . '',
'footer' => Html::submitButton(Yii::t('app', 'Close')),
//'toggleButton' => [
// 'label' => '',
// 'href' => yii\helpers\Url::to(['update'])
//],
echo "";
'size' => yii\bootstrap\Modal::SIZE_LARGE,
]);
yii\bootstrap\Modal::end();
?>
== Modal Confirmation (called from GridView action) ==
Example of confirmation dialog in a view:
$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,
]) ?>
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',
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);
},
dataType: 'json' // return data type
});
} else {
alert('No items available/selected for deletion.');
}
}
", \yii\web\View::POS_END);
?>
';
$str .= '';
$str .= '';
$str .= '';
$str .= '';
$str .= ' ';
$str .= ' ';
$str .= ' ';
$str .= ' ';
return $str;
}
?>
The previous modal definition within ''getDeleteConfirmationDialog()'' can be refactored at the end of the view as:
$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' => \yii\helpers\Html::button('', [
'id' => 'btnDelete',
'class' => 'btn btn-default btn-sm',
'data-toggle' => 'modal',
'data-target' => '#modalConfirmDelete',
]), // Call Modal dialog
],
],
'showFooter' => true,
]) ?>
'modalConfirmDelete',
'header' => '' . Yii::t('app', 'Delete') . '',
'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' => '', 'href' => yii\helpers\Url::to(['delete-selected'])],
'size' => yii\bootstrap\Modal::SIZE_SMALL,
]);
echo "";
echo " ### Delete selected records?
";
echo "";
yii\bootstrap\Modal::end();
?>
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',
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);
},
dataType: 'json', // return data type
});
} else {
alert('No items available/selected for deletion.');
}
}
", \yii\web\View::POS_END);
?>
In controller, add the action to call. Eg: ''actionDeleteSelected()''
//...
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',
]);
}
See also:
* [[https://stackoverflow.com/questions/37473895/how-i-can-process-a-checkbox-column-from-yii2-gridview|Process checkbox column from Yii2 GridView]]