Detailed explanation of how to use modal pop-up window example code in combination with gridview in yii2, yii2gridview

Detailed explanation of how to use modal pop-up window in yii2 combined with gridview. In the previous article, yii2gridview

introduced to you how to use modal pop-up window in Yii2 (basic use), that is Take creation as an example.

In actual development, we often encounter situations where modal is used to modify the data on the list page. If it is a general loop display, I believe most people can operate it after seeing the basic use of modal. However, it is estimated that some people will be able to operate it when combined with gridview. It’s starting to get too much, let’s see how to solve this problem!

1. Add an [Update] button to the gridview operation, and specify the value of data-toggle data-target class and data-id

[
'class' => 'yii\grid\ActionColumn',
'template' => '{update}', 
'buttons' => [
'update' => function ($url, $model, $key) {
return Html::a('更新', '#', [
'data-toggle' => 'modal',
'data-target' => '#update-modal',
'class' => 'data-update',
'data-id' => $key,
]);
},
],
],

2. Add modal for update

<&#63;php 
use yii\bootstrap\Modal;
// 更新操作
Modal::begin([
'id' => 'update-modal',
'header' => '<h4 class="modal-title">更新</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]); 
$requestUpdateUrl = Url::toRoute('update');
$updateJs = <<<JS
$('.data-update').on('click', function () {
$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
function (data) {
$('.modal-body').html(data);
} 
);
});

JS;

$this->registerJs($updateJs);
Modal::end();
?>

3. Modify our update method

public function actionUpdate($id)
{
$model = $this->findModel($id);
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(['index']);
} else {
return $this->renderAjax('update', [
'model' => $model,
]);
}
}

It can be seen that the whole process is no different from the basic use of modal we mentioned before. But it doesn’t end here. I believe most people may encounter the following common problems that are difficult to solve:

select2 is used in yii2 modal. Why is the search box not searchable?

yii2 There are multiple modals on a single page. Why do the pages share one page and wait until the data is loaded?

yii2 A single page has multiple modals. Take modal as an example when adding a single page and updating the gridview above. When using select2, why does the updated select2 become invalid and ineffective?

Let’s see how to solve these problems one by one:

First of all, the first question is that you only need to specify the tabindex of the options option to false when modal uses begin. The reference is as follows:

Modal::begin([
// ......
'options' => [
'tabindex' => false 
],
]);

The second and third problems are caused by using multiple modals in a single page. To illustrate the problem, we use modals in both the [Create] button in a list and the [Update] button in the gridview. . According to how to use modal pop-ups in Yii2 (basic use) and this article, the first problem is obviously

$('.modal-body').html(data);

Caused by multiple modals, after we use the modal for the first time, values ​​are assigned to the bodies of all modals, so that when other modals are used later, the same content is displayed before the data is requested. To solve this problem, you only need to assign a separate value to the respective modal-body after each asynchronous request. The code can be referenced as follows:

$('#create').on('click', function () {
$.get('url', {},
function (data) {
$('#create-modal').find('.modal-body').html(data);
// $('.modal-body').html(data);
} 
);
});
$('.data-update').on('click', function () {
$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
function (data) {
$('#update-modal').find('.modal-body').html(data);
// $('.modal-body').html(data);
} 
);
});

Look at the last question, students who have used select2 should pay attention! ! !

If like the example introduced in this topic, if select2 is included in the form, it will cause the select2 field to be normal only during [create], and the select2 field will be "hidden" during the [update] operation!

This is actually caused by the ID corresponding to the same select2 on the same page. To solve this problem, you only need to remove all existing form items on the page before each asynchronous request for data. See the specific implementation:

$('#create').on('click', function () {
// 有效避免multiply modal select2的问题
// 移除异步加载过来的form表单
$('.document-nav-form').remove();
$.get('{$requestUrl}', {},
function (data) {
$('#create-modal').find('.modal-body').html(data);
} 
);
});
$('.data-update').on('click', function () {
// 有效避免multiply modal select2的问题
// 移除异步加载过来的form表单
$('.document-nav-form').remove();
$.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
function (data) {
$('#update-modal').find('.modal-body').html(data);
} 
);
});

The above is the entire description of the example code of how to use modal pop-up window combined with gridview in yii2 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will promptly Reply to everyone. I would also like to thank you all for your support of the Bangkejia website!