Yii2: Replace default confirmation message used by Gridview with Sweet alert

Question

I am using yii2mod/yii2-sweet-alert in my projects, I am using it on basic and advanced themes, and I love it.

The question. How can I change the grid default confirmation dialog that is a plain javascript confirmation in order to use Sweet-alert to make it look better?

I already tried modifying the button's template for the delete, because if you want to change the message you will do the following:

        [
            'class' => ActionColumn::className(),
            'template' => '{update}{delete}',
            'buttons' => [
                'delete' => function($url, $model){
                    return Html::a('<span class="glyphicon glyphicon-trash"></span>', ['delete', 'id' => $model->id], [
                        'class' => '',
                        'data' => [
                            'confirm' => 'Are you absolutely sure ? You will lose all the information about this user with this action.',
                            'method' => 'post',
                        ],
                    ]);
                }
            ]
        ]

But I haven't been successful on changing the confirmation message from the javascript one to sweet alert.

---

Also I am trying as a second option, to make it work with Krajee/ Grid and actionColumn but still can make it work «this is the second option am working, to do this».

        [
            'class' => 'kartik\grid\ActionColumn',
            'viewOptions' => ['hidden' => true],
            'updateOptions' => ['title' => 'Edit events', 'data-toggle' => '??'],
            'deleteOptions' => ['title' => 'delete your event', 'data-toggle' => 'I am Lost here'],
        ],

Please any idea on how to change this behavior?

---

MORE ON HOW TO SOLVE IT - thanks to @muhammad-omer-aslam

1. create a js file on your public folder, in my case
   /backend/web/js/confirmSwal.js and add the provided code:

   Add these lines

   yii.confirm = function (message, okCallback, cancelCallback) {
       swal({
           title: message,
           type: 'warning',
           showCancelButton: true,
           closeOnConfirm: true,
           allowOutsideClick: true
       }, okCallback);
   };
   

2. Add this to your AppAssets on

   /backend/assets/AppAssets.php

   public $js = [
       '/js/confirmSwal.js',
   ];
   

3. And that's it it works beautiful.

Thanks again to Muhammad.

Answer 1

UPDATE2

Just correction in the code you need to do

• okCallback.call() or add parenthesis () like 'okCallback()`
• and then cancelCallback.call() or add parenthesis cancelCallback()

inside the .then((selection)=>{}) and it is an anonymous function and needs to be called rather than just using okCallback so the code inside the .then((selection)=>{}) becomes

if(selection){ okCallback.call();}else{ cancelCallback.call();}

UPDATE

The following options are deprecated in sweetalert 2.0 version,

• callback in favor of promise: If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null.

• allowClickOutside is now closeOnClickOutside for clarity.

• showCancelButton and showConfirmButton are no longer needed. Instead, you can set buttons: true to show both buttons or buttons: false to hide all buttons. By default, only the confirm button is shown.
• When using a single string parameter (e.g. swal("Hello world!")), that parameter will be the modal's text instead of its title.
• type and imageUrl have been replaced with a single icon option. If you're using the shorthand version (swal("Hi", "Hello world", "warning")) you don't have to change anything.

So you can change the code to the following in case you are using ver 2.x or upgrading from 1.x.

yii.confirm = function (message, okCallback, cancelCallback) {
    swal({
            text: message,
            icon: 'warning',
            buttons : {
                cancel : {
                    text : "Oops! No",
                    value : null,
                    visible : true,
                    className : "",
                    closeModal : true
                },
                confirm : {
                    text : "Delete It Already",
                    value : true,
                    visible : true,
                    className : "",
                    closeModal : true
                }
            },
            closeOnClickOutside: true
    }).then((selection) => {
     if(selection){okCallback;}else{cancelCallback;}
    });
}

---

You can override the Yii2 default data-confirm popup with the following code:

The basics are to include the asset, then add this JS:

/**
 * Override the default yii confirm dialog. This function is
 * called by yii when a confirmation is requested.
 *
 * @param message the message to display
 * @param okCallback triggered when confirmation is true
 * @param cancelCallback callback triggered when canceled
 */
yii.confirm = function (message, okCallback, cancelCallback) {
    swal({
        title: message,
        type: 'warning',
        showCancelButton: true,
        closeOnConfirm: true,
        allowOutsideClick: true
    }, okCallback);
};