Триггеры действий и модальных окон

• Триггеры вызова действий отправляют POST запросы к обработчику, в переменных запроса передаются всё переменные из атрибутов data-*
• Триггеры вызова модальных окон отправляют GET запросы к обработчику, в переменных запроса передаются всё переменные из атрибутов data-*

Создайте модель - действие с request uri

/api/action/my-action

Предположим наша модель выполняясь возвращает некий ответ в формате json

Наведите мышкой на id модели в таблице и вызовите "конструктор триггера". Триггер действия - это некая кнопка или любой элемент, с атрибутом data-action="my-action" Остальные атрибуты для триггера не обязательны.

<a class="btn btn-primary" data-action="my-action">Кнопка действия</a>

При клике на такой триггер будет мгновенно отправлен POST запрос на обработчик модели /api/action/my-action На время ajax запроса кнопка автоматически блокируется, а также будет блокирован весь экран - показывается полупрозрачный спиннер загрузки, это сделано во избежание повторных кликов.

Для действия с подтверждением добавьте аттрибут data-confirm="true" - при клике на триггер, запрос не будет отправлен, а будет выдано стандартное модальное окно с заголовком "Подтвердите действие" и кнопками "Отмена / Да". Запрос будет отправлен лишь при нажатии на "Да".

Дополнительными атрибутами к триггеру, вы можете изменить заголовок и текст в модальном окне подтверждения:

data-header="Заголовок окна" data-body="Содержимое .modal-body окна"

В атрибутах можно указать любую вашу callback функцию, которая будет вызвана сразу после выполнения действия и получит в response параметр ответа json от обработчика data-callback="callbackMyAction"

А саму функцию вы пропишите в коде заранее, вот простейший код, который покажет сообщение-всплавашку с ошибкой или успехом действия:

function callbackMyAction(response) {
 
    if (response.error) {
       errorToast(response.error);
       return;
    }
 
    successToast(response.message);
 }

Вы можете указать и другой формат ответа обработчика, отличный от json, например data-response="script" или data-response="html" или же data-response="xml"

Вы можете указать дополнительно любые произвольные данные в data-* атрибутах триггера, например data-id="value1" data-subid="value2" и так далее. И обработчик получит все эти переменные в POST в таком виде:

$_POST['id']     = 'value1';
$_POST['subid']  = 'value2';

По умолчанию в обработчиках все передаваемые переменные рекурсивно обрабатываются для защиты от атак типа XSS

array_walk_recursive($_POST, function (&$item) {
    $item = trim(htmlspecialchars($item, ENT_QUOTES));
});

Создаваемые модели действий уже содержат примеры успешных и ошибочных json ответов

---

Создайте модель - модальное окно с request uri

/api/modal/my-modal

Укажите для неё любой из доступных шаблонов окон. Наведите мышкой на id только что созданной модели в таблице и вызовите "конструктор триггера".

Кнопка для триггера модального окна ничем не отличается от стандартного синтаксиса Bootstrap 4

<a class="btn btn-primary" data-toggle="modal" data-target="#my-modal">Кнопка вызова модального окна</a>

Но в данном случае вовсе не обязательно размещать html код модального окна в коде страницы. Модальное окно будет запрошено по api и автоматически добавлено в DOM документа. А после закрытия модалки её код будет автоматически уничтожен из DOM.

На момент ajax запроса к api с модальным окном, кнопка триггер автоматически блокируется как и весь экран - показывается полупрозрачный спиннер загрузки.

Аналогично можно добавить к атрибутам триггера имя вашей callback функции data-callback="callbackMyModal". Данная функция будет вызвана сразу же после добавления кода модалки в DOM, но ещё до её отображения. Т.е. средствами javascript в callback функции вы можете изменить это окно до неузнаваемости или произвести ещё ряд необходимых действий.

function callbackMyModal() {
    $("#my-modal .modal-header").html("Replaced header");
}

Также вы можете передать любые переменные в data-* атрибутах, например data-id="value1" data-subid="value2", которые будут переданы в GET запросе вызова модального окна.

---

Помимо вышеописанных методов, вы можете вызывать действия и модальные окна при помощи специальных javascript функций, аналогично передавая им любые параметры. Об этом следующий раздел.