» » » Override delete confirm dialog in Yii2

Override delete confirm dialog in Yii2

Yii version 2.0.13.1

In grid view widget, the delete button uses the window confirm dialog which is simple. But it would be better if it can 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 what we will do
  • Download the bootboxjs which is a small javascript library. It allows you to create programmatic dialog boxes using Bootstrap modals. Then add the bootboxjs file into your js folder
  • Edit an active column in 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 into your assets bundle

 

Let’s start!

 

Download bootboxjs

Download the bootboxjs and place into your js folder. My case, I place into frontend/themes/assets/js

 

Edit an active column in grid view widget

My case, I edit the active column in index.php. I add 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'),
                ],
            ]);
        }
    ]
],

 

Create a new js file and add the override js code 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;
    }
});

 

Add the new js file into your assets bundle

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

 

That’s it! You are good to go.

 

Useful links