Override Delete Confirm Dialog in Yii2

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

Yii version 2.0.13.1

In the grid view widget, the delete button uses the window confirm dialog, which is simple. But it would be better if it could be changed to use the confirm dialog with Bootstrap style. Since Yii2 is already integrated with the Bootstrap widget. In this tutorial, I will share how I implement the new confirm dialog with a translated message by Yii::t().

Here’s What We’ll Be Doing

• Download the bootbox.js, which is a small JavaScript library. It allows you to create programmatic dialog boxes using Bootstrap modals. Then add the bootboxjs file to your JS folder
• Edit an active column in the grid view widget on your page
• Create a new JS file and add the override JS code for yii.confirm
• Add the new JS file to your assets bundle

Download bootboxjs

Download the bootbox.js and place it in your JS folder. In my case, I place it into frontend/themes/assets/js

Editing an Active Column in Grid View

In my case, I edit the active column in index.php. I added the code below.

[
    'class' => 'yii\grid\ActionColumn',
    'buttons' => [
        'delete' => function($url, $model){
            return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url,
            [                                    
                'data' => [
                    'confirm' => Yii::t('yii','Are you sure you want to delete this item?'),
                    'method' => 'post',
                    'pjax' => 0,                                            
                    'title' => Yii::t('yii', 'Confirm?'),
                    'ok' => Yii::t('yii', 'Confirm'),
                    'cancel' => Yii::t('yii', 'Cancel'),
                ],
            ]);
        }
    ]
],

JS Override for yii.confirm

jQuery(document).ready(function ($) {
    // --- Delete action (bootbox) ---
    yii.confirm = function (message, ok, cancel) {
        var title = $(this).data("title");
        var confirm_label = $(this).data("ok");
        var cancel_label = $(this).data("cancel");

        bootbox.confirm(
            {
                title: title,
                message: message,
                buttons: {
                    confirm: {
                        label: confirm_label,
                        className: 'btn-danger btn-flat'
                    },
                    cancel: {
                        label: cancel_label,
                        className: 'btn-default btn-flat'
                    }
                },
                callback: function (confirmed) {
                    if (confirmed) {
                        !ok || ok();
                    } else {
                        !cancel || cancel();
                    }
                }
            }
        );
        // confirm will always return false on the first call
        // to cancel click handler
        return false;
    }
});

Include JS in Asset Bundle

Don’t forget to add this new JS file to your assets bundle.

That’s it! You are good to go.

Useful links

• https://github.com/yiisoft/yii2/blob/master/framework/assets/yii.js
• http://bootboxjs.com/documentation.html#bb-confirm-dialog

Your support helps keep this blog running! Secure payments via Paypal and Stripe.