Backend Development
PHP Tutorial
About the code for using modal pop-up window in combination with gridview in yii2
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([
'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 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1423
52
1317
25
1268
29
1246
24
PHP and Python: Comparing Two Popular Programming Languages
Apr 14, 2025 am 12:13 AM
PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.
PHP in Action: Real-World Examples and Applications
Apr 14, 2025 am 12:19 AM
PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.
Explain secure password hashing in PHP (e.g., password_hash, password_verify). Why not use MD5 or SHA1?
Apr 17, 2025 am 12:06 AM
In PHP, password_hash and password_verify functions should be used to implement secure password hashing, and MD5 or SHA1 should not be used. 1) password_hash generates a hash containing salt values to enhance security. 2) Password_verify verify password and ensure security by comparing hash values. 3) MD5 and SHA1 are vulnerable and lack salt values, and are not suitable for modern password security.
How does PHP handle file uploads securely?
Apr 10, 2025 am 09:37 AM
PHP handles file uploads through the $\_FILES variable. The methods to ensure security include: 1. Check upload errors, 2. Verify file type and size, 3. Prevent file overwriting, 4. Move files to a permanent storage location.
PHP: A Key Language for Web Development
Apr 13, 2025 am 12:08 AM
PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7
How does PHP type hinting work, including scalar types, return types, union types, and nullable types?
Apr 17, 2025 am 12:25 AM
PHP type prompts to improve code quality and readability. 1) Scalar type tips: Since PHP7.0, basic data types are allowed to be specified in function parameters, such as int, float, etc. 2) Return type prompt: Ensure the consistency of the function return value type. 3) Union type prompt: Since PHP8.0, multiple types are allowed to be specified in function parameters or return values. 4) Nullable type prompt: Allows to include null values and handle functions that may return null values.
The Enduring Relevance of PHP: Is It Still Alive?
Apr 14, 2025 am 12:12 AM
PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.
PHP vs. Python: Understanding the Differences
Apr 11, 2025 am 12:15 AM
PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHP is suitable for web development, with simple syntax and high execution efficiency. 2. Python is suitable for data science and machine learning, with concise syntax and rich libraries.
