Code for using modal pop-up window in conjunction with GridView in Yii2

This article mainly introduces how to combine the use of yii2 in the GridView modal window of the relevant data, the need for friends can refer to the following

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

In the actual development, we often also encounter the list page data modification to use modal, if it is a general cycle display, I believe most people see the basic use of modal will operate, but combined with the GridView estimate some people will begin to be overwhelmed, we see how to solve this problem!

1, the operation of the GridView Add [Update] button, and specify the value of Data-toggle Data-target class and Data-id

[' class ' = ' yii\grid\actioncolumn ', ' template ' = ' {update} ', ' buttons ' = [' Update ' = function ($url, $mode L, $key) {return html::a (' Update ', ' # ', [' data-toggle ' = ' modal ', ' data-target ' = ' #update-modal ', ' class ' = ' data-') Update ', ' data-id ' = $key,]);},],

2. Add Modal for 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 is no different from the basic use of modal we said before. But this is not the end, I believe most people may encounter the following a few common problems that are difficult to solve:

Yii2 modal used Select2 Why is the search box not searchable?

YII2 single page Multiple modal why does the page share one, and wait until the data is loaded?

YII2 single page multiple modal, add to a single page and the GridView update above us all use modal as an example, when using Select2, why does the updated select2 fail to work?

Let's look at how to solve these problems one after another:

First of all, you only need to specify the options TabIndex false when modal uses begin, as follows:


Modal::begin ([' options '] = [' tabindex ' = ' = False],]);

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


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

Caused by multiple modal, after we first used the modal to give all the body of the modal a value, so that when using the other modal later, before the data is not requested to display the same content of the bug. To solve this problem, you only need to assign a value to each 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);});});

See the last question, the use of SELECT2 students to pay attention!!!

If this is the case, as we have described in this topic, with Select2 in the form, it will result in only select2 normal when [create], [UPDATE] select2 the field "hidden" effect!

This is actually caused by the same select2 corresponding ID on the same page, and solving the problem requires removing all existing form items on the page before each asynchronous request data. See specific implementations:


$ (' #create '). On (' click ', function () {//) effectively avoid the problem of multiply modal select2//Remove the async-loaded form form $ ('. Document-nav-form '). Remove (); $.get (' {$requestUrl} ', {},function (data) {$ (' #create-modal '). Find ('. Modal-body '). HTML (data);}); $ ('. Data-update '). On (' click ', function () {//} effectively avoids the problem of multiply modal select2//Remove the async-loaded form 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 whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!