Замена стандартного Alert на модальное окно Bootstrap при удалении записей в Gridview Yii2

В прошлой статье я показал как массово удалять запись в Yii2, а в здесь вы узнаете как сменить стандартный JavaScript confirm, который всплывает при нажатии кнопки удаления, на модальное окно bootstrap. Оно гораздо лучше вписывается в общий дизайн проекта на Yii2. Заходя вперед могу сказать, что всплывающее окно мы можем поставить любое, к примеру Sweet Alert. Какое захотите, главное понять сам принцип и он не сложный. Сделать это можно несколькими способами и все они расписаны в интернете. Мне они не понравились по причине того, что уж слишком много кода приходится писать. Но я нашел решение проще некуда и кода совсем мало. Давайте приступим.

Но прежде хотелось бы показать откуда этот код вызывается изначально, то есть по умолчанию. Сам код находится в файле yii.js и выглядит так:

1
2
3
4
5
6
7

confirm: function (message, ok, cancel) {
  if (window.confirm(message)) {
     !ok || ok();
  } else {
     !cancel || cancel();
    }
  },

Нас такая постановка не устраивает и мы ее будем переопределять. Yii позволяет это сделать. Но сначала нужно подготовить само модальное окно.

1
2
3
4
5
6

Modal::begin([
    'id' => 'DeleteModal',
    'title' => '<h5>Удаление</h5>',
    'footer' => '<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>' 
        . Html::a('Удалить', '#', ['class' => 'btn btn-danger', 'data-method' => 'post']),]);
Modal::end();

Осталось только добавить в JavaScript файл, который должен быть подключен к сайту, этот код и проверить как все работает:

1
2
3
4
5

yii.confirm = function (message) {
    let modal =  $('#DeleteModal');
    modal.find('a.btn-danger').attr('href', $(this).attr('href'));
    modal.modal({modalContent: modal.find('.modal-body').text(message)});
};

Результат работы можно наблюдать на картинке выше. В message попадет текст, который вы напишете здесь:

'data-confirm' => Yii::t('yii', 'Удалить сотрудника с ID: '.$key.'?'),

Таким образом мы меняем поведение при подтверждении удаления записи в Yii2 и делаем это так, как нам нужно, а не как нам предлагает фреймворк из коробки.