Yii2-related learning Records, alert beautification, confirm asynchronization, flash in session and usage of widgets (6)-roaming on the cloud

Yii2-related learning Records, alert beautification, confirm asynchronization, flash in session and usage of widgets (6)-roaming on the cloud, the pop-up boxes such as alert and confirm that come with the system are really ugly. as a face filter, can this be tolerated?

Here I am using kartik-v/yii2-dialog, this is based on the bootstrap3-dialog this made some commonly used alert, confirm and dialog small part encapsulation, of course, essentially still bootstrap3-dialog, the native method can be used, the native method is used here, and the bootstrap3-dialog is the encapsulation based on the modals of bootstrap3. Well, this is the basic relationship. When searching for this related knowledge, we often see people mention bootbox, which is also a popular beautification plug-in. the basic principle is similar and its usage is slightly different, searching for the yii2 bootbox in packagist will find that some people have integrated Yii2 (or they can integrate themselves, as will be discussed later), which is also worth recommending.

Follow the instructions for installation. it is best to follow the instructions on github, because the latest is usually updated here. @ Dev is used in composer. Let's take a look at the description here. if it fails, composer self-update first, and try again. at the beginning of the installation, there were also various errors, and then suddenly it would be okay. Note that confirm must be written for the dialog call. Otherwise, an error is returned.

Pretty. But like the confirm (such as the delete button) that comes with the Yii Framework Gridview, it is still native when you click it, because its source code is the confirm command. Fortunately, the Yii Framework provides a method, we can overwrite the confirm method. You can perform the following operations:

1. let's take a look at the confirm method in the file vendor/yiisoft/yii2/assets/yii. js: you can see it in the comment. you can use yii. confirm to override this setting.

 /**    * Displays a confirmation dialog.    * The default implementation simply displays a js confirmation dialog.    * You may override this by setting `yii.confirm`.    * @param message the confirmation message.    * @param ok a callback to be called when the user confirms the message    * @param cancel a callback to be called when the user cancels the confirmation    */    confirm: function (message, ok, cancel) {        if (confirm(message)) {            !ok || ok();        } else {            !cancel || cancel();        }    },

2. we will rewrite it. you can create a new confirm in backend/web/js. js file, and then click again. refer to this article. this is a bootbox setting and the version is outdated. However, the comment below provides the latest method. And our settings are consistent with this principle, but it is changed to the parameter style required by kartik-v/yii2-dialog:

yii.confirm = function (message, ok, cancel) {    krajeeDialog.confirm(message,function(data){        if (data) {            !ok || ok();        } else {            !cancel || cancel();        }    });    // confirm will always return false on the first call    // to cancel click handler    return false;}

3. we need to register this js file. you can add the above js file in backend/assets/Appasset. php:

Class AppAsset extends AssetBundle {public $ basePath = '@ webroot'; public $ baseUrl =' @ web'; public $ css = ['css/site.css ',]; public $ js = ['JS/confirm. JS', // here it is]; public $ depends = ['yii \ web \ yiiasset', 'yii \ bootstrap \ bootstrapasset',];}

In this way, you can call the delete button:

Because we use kartik-GridView, its two functions show all the records and export csv prompts, they all use native confirm. can we endure obsessive-compulsive disorder? Okay, I am sorry. here I will only give you some ideas for change. in particular, if I only understand basic js, put the time elsewhere.

Before changing, first we need to clarify the difference between the confirm (bootbox) of kartik-v/yii2-dialog and the native confirm. Native confirm is synchronous, while kartik-v/yii2-dialog's confirm method is asynchronous callback. As a result, native confirm can directly write as follows:

Function abc () {return window. confirm ('20140901'); // confirm Click OK to return true, cancel return false, wait for the user to click} if (abc () {alert ('20160901 '); // Click Yes. the alert pop-up window will pop up}

And if you use kartik-v/yii2-dialog confirm also write this way, it will never pop up, because it is asynchronous callback, will not wait for you to click.

Function abc () {krajeeDialog. confirm ('20140901', function (result) {if (result) {return true ;}else {return false ;}}) ;}if (abc ()) {alert ('20140901'); // The window will not pop up regardless of the vertex because the callback is asynchronous}

Some people may want to (such as me) write a line? No, does not support such writing, in the bootstrap3-dialog such write return is window has open.

if(krajeeDialog.confirm('123',function(result){}){    return true;}else{    return false;      }

So to execute alert in the confirm of kartik-v/yii2-dialog, you can only put alert in the callback function:

function abc(){    krajeeDialog.confirm('123',function(result){        if(result){            alert('456');        }else{           //do something        }    });}

In addition, the modification in the vendor violates the principle (it is very difficult to come up with, but it is inherited, and the js exported to csv does not find similar yii. the method covered by js can only be rewritten to introduce something), which is also the reason why I don't want to change the source code. Potholes. Okay, let's continue to explain how to change it:

1. {toggleData} shows all records, and its call confirm is the getToggleDataScript method in the vendor/kartik-v/yii2-grid/GridView. php. we can modify return:

$ Url = Url: current ([$ this-> _ toggleDataKey => $ tag]); // first define the urlreturn "\ $ ('# {$ this-> _ toggleButtonId }'). on ('{$ event}', function (e) {e. preventDefault (); // first stop clicking the event krajeeDialog. confirm ('{$ msg}', function (data) {if (data) {window. location. href = '{$ url}'; // click yes to Jump}); // The following is the original method // if (! Window. confirm ('{$ msg}') {e. preventDefault ();}});";

2, {export} in the export prompt, is in the vendor/kartik-v/yii2-grid/assets/js/kv-grid-export.js: this is the trouble, it seems that you need to override the correlated y and listenClick methods. Let me know who has finished writing it.

KvConfirm: function (msg) {try {return window. confirm (msg); // call this} catch (err) {return true ;}}

The above is the case. let's talk about the flash in the session. when we create a flash, we usually need to give a prompt about whether the flash is complete or not. You can click here to view the built-in flash method in Yii. In fact, Alert components have been integrated in the adminLTE background framework. we can go to backend/views/layout/content. php found the call of this widget In this case, we only need to add the setFlash method to the controller, so we can receive the following in the view:

Public function actionCreate () {$ model = new User (); if ($ model-> load (Yii: $ app-> request-> post ()) & amp; $ model-> save () {$ session = Yii: $ app-> session; // session $ session-> setFlash ('success ', 'created successfully'); // add flash return $ this-> redirect (['index']);} else {return $ this-> render ('create ', ['model' => $ model,]) ;}}

Captured: (the alert style color of adminLTE is so deep, while the color of Yii Framework is light, but it does not match the color of the background framework)

The further extension is that if a success prompt is displayed, I can hide it after 5 seconds. you can set it like this and add the following gradually hidden js code in backend/views/layout/content. php.