How to use the modal window instance code to explain _php example in Yii2 with the GridView

In the previous article, we introduced how to use the modal window (basic use) in Yii2, that is, to create as an example.

In actual development, we will often encounter list page data modification to use modal situation, if the general cycle show, I believe most people see the basic use of modal will operate, but the combination of the GridView estimate some people began to unbearable, we see how to solve this problem!

1. The operation of the GridView increases the [UPDATE] button and specifies the value of the Data-toggle Data-target class and Data-id

[
' class ' => ' Yii\grid\actioncolumn ', '
template ' => ' {update} ', 
' buttons ' => [
' Update '] > Function ($url, $model, $key) {return
html::a (' Update ', ' # ', ' # ', [
' Data-toggle ' => ' modal ',
' data-target ' = > ' #update-modal ',
' class ' => ' data-update ',
' Data-id ' => $key,
];
}
,],

2, add modal for the update

<?php use 
yii\bootstrap\modal;
Update Operation
Modal::begin ([
' id ' => ' update-modal ', '
header ' => ' 
 
 

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,
]
}
}

We can see that the whole process of modal with the basic use of what we said before is no different. But this is not the end, and it is believed that most people may encounter some of the most intractable problems below:

Yii2 modal is used in Select2 why is the search box not searchable?

Yii2 a single page multiple modal why the page will share one, and so the data is finished loading?

Yii2 a single page with multiple modal, with a single page addition and the GridView update above us using modal as an example, why is updating Select2 invalidated when using Select2?

Let's look at how one solves these problems:

First of all, you just need to specify that the options option TabIndex to False when modal uses begin, as follows:

Modal::begin ([
//...
] Options ' => [
' TabIndex ' => false 
],
]);

The second and third questions are caused by the use of multiple modal in a single page, and to illustrate the problem, we use modal in the [Create] button and the Update button in the GridView in a list. According to our YII2 how to use the modal window (basic use) and this article, the first question is obviously

$ ('. Modal-body '). HTML (data);

As a result, multiple modal are assigned to all modal's body after the first time we use modal, so that when we use other modal later, the same content is displayed as a bug before the data is requested. To resolve this problem, you only need to assign values to individual modal-body after each asynchronous request, and the code can refer to the following:

$ (' #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);};
});

To see the last question, students who have used SELECT2 should pay attention to the!!!

If, as we have described in this topic, a form with SELECT2 will cause the select2 to be normal at the time of creation, select2 the effect of the field "hidden" when the [UPDATE] operation!

This is actually caused by the same select2 corresponding ID of the same page, which solves the problem by removing all existing table items on the page before each asynchronous request data. See Specific implementation:

$ (' #create '). On (' click ', Function () {
/////effectively avoid multiply modal select2/
/Remove asynchronously loaded form
$ ('. Document-nav-form '). Remove ();
$.get (' {$requestUrl} ', {},
function (data) {
$ (' #create-modal '). Find ('. Modal-body '). HTML (data);
});
$ ('. Data-update '). On (' click '), function () {
///effectively avoid multiply modal select2 problem
//Remove asynchronous loaded 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 a small set to introduce the YII2 in combination with the GridView how to use the modal window example code to explain all the narration, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!