About the code for using modal pop-up window in combination with gridview in yii2

This article mainly introduces the relevant information on how to use modal pop-up windows in Yii2 combined with gridview. Friends who need it can refer to it.

In the previous article, I introduced how to use modal pop-up windows in Yii2 ( Basic usage), 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, but combined with gridview, it is estimated Some people just can’t stand it anymore, let’s see how to solve this problem!

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

[
'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

<?php 
use yii\bootstrap\Modal;
// 更新操作
Modal::begin([
&#39;id&#39; => &#39;update-modal&#39;,
&#39;header&#39; => &#39;<h4 id="更新">更新</h4>&#39;,
&#39;footer&#39; => &#39;<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>&#39;,
]); 
$requestUpdateUrl = Url::toRoute(&#39;update&#39;);
$updateJs = <<<JS
$(&#39;.data-update&#39;).on(&#39;click&#39;, function () {
$.get(&#39;{$requestUpdateUrl}&#39;, { id: $(this).closest(&#39;tr&#39;).data(&#39;key&#39;) },
function (data) {
$(&#39;.modal-body&#39;).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 does not end here. I believe that most people may encounter the following common problems that are difficult to solve:

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

yii2 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, you only need to specify the tabindex of the options option when modal uses begin. Just set it to false, refer to the following:

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 modal in both the [Create] button in a list and the [Update] button in the gridview. According to how to use the modal pop-up window in Yii2 (basic use) and this article, the first problem is obviously caused by

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

, There are multiple modals. After we use the modal for the first time, values ​​are assigned to the bodies of all modals, so that when we use other modals later, the same content will be 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 referred to 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);
} 
);
});

See 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 the [Create] operation, 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. Look at 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 content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About Yii’s Model query based on arrays and objects

Yii and CKEditor implement the image upload function

How to search multiple fields at the same time in Yii2

##

The above is the detailed content of About the code for using modal pop-up window in combination with gridview in yii2. For more information, please follow other related articles on the PHP Chinese website!