Подтверждение запросов

Часто вам потребуется подтверждать действие перед отправкой запроса. htmx поддерживает атрибут hx-confirm, который позволяет вам подтвердить действие с помощью простого диалогового окна JavaScript:

<button hx-delete="/account" hx-confirm="Хотите удалить свой аккаунт?">
  Удалить мою учётку
</button>

Используя события, вы можете реализовать более сложные диалоговые окна подтверждения. Пример confirm показывает, как использовать библиотеку sweetalert2 для подтверждения действий htmx.

Использование событий

Другой вариант для подтверждения — это использование события htmx:confirm. Это событие срабатывает на каждом триггере запроса (не только на элементах с атрибутом hx-confirm) и может быть использовано для реализации асинхронного подтверждения запроса.

Вот пример использования оповещения sweet alert на любом элементе с атрибутом confirm-with-sweet-alert='true':

document.body.addEventListener('htmx:confirm', function (evt) {
  if (evt.target.matches("[confirm-with-sweet-alert='true']")) {
    evt.preventDefault();
    swal({
      title: "Уверены?",
      text: "Вы уверены, что уверены?",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((confirmed) => {
      if (confirmed) {
        evt.detail.issueRequest();
      }
    });
  }
});