Подтверждение действий с hx-confirm

HTMX предоставляет мощный инструмент для работы с динамическими веб-страницами. Одним из таких инструментов является атрибут hx-confirm, который позволяет интегрировать функциональность подтверждения действий перед их выполнением. Этот атрибут становится особенно полезным при реализации пользовательских интерфейсов, где важно подтвердить намерения пользователя перед выполнением определённого действия — например, удаление записи или отправка важной формы.

Атрибут hx-confirm добавляется к элементам, для которых требуется подтверждение действия. Он принимает строку, которая будет отображена в виде сообщения для пользователя. Когда пользователь пытается выполнить действие, связанное с этим элементом, на экране появляется диалоговое окно с текстом подтверждения. Пользователь может либо согласиться, либо отменить действие.

Пример использования:

<button hx-post="/delete-item" hx-confirm="Вы уверены, что хотите удалить этот элемент?">Удалить</button>

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

Как работает подтверждение

При использовании hx-confirm, HTMX автоматически добавляет обработку нажатия кнопки или другого элемента с атрибутом. Когда пользователь пытается выполнить действие, браузер вызывает стандартное диалоговое окно с запросом подтверждения. Оно имеет две кнопки: “Ок” и “Отмена”. Если пользователь нажимает “Ок”, происходит выполнение запроса, привязанного к элементу (например, отправка формы или выполнение AJAX-запроса). Если “Отмена” — запрос не выполняется.

Работа с динамическими сообщениями

В случае, если сообщение для подтверждения зависит от состояния страницы или контекста, его можно динамически обновлять. Вместо жёстко заданной строки, как в примере выше, можно использовать более гибкие подходы с использованием Jav * aScript:

<button hx-post="/delete-item" hx-confirm="Удалить элемент с ID: {{ item.id }}?">Удалить</button>

В данном примере строка подтверждения динамически подставляет значение ID элемента. Это может быть полезно в случаях, когда на странице отображаются данные, и пользователь должен подтвердить действия, основанные на этих данных.

Отмена подтверждения с помощью hx-disable

В некоторых ситуациях необходимо отменить или деактивировать подтверждение. Для этого можно использовать атрибут hx-disable. Когда атрибут активен, обработчик подтверждения не будет срабатывать:

<button hx-post="/delete-item" hx-confirm="Вы уверены?" hx-disable="true">Удалить</button>

Если значение атрибута hx-disable равно true, окно подтверждения не будет показываться, и действие будет выполняться немедленно.

Комбинирование с другими аттрибутами HTMX

Одной из сильных сторон HTMX является возможность комбинировать атрибуты. Например, можно использовать hx-confirm в связке с атрибутами hx-get, hx-post, hx-target и другими. Это позволяет выстраивать сложные взаимодействия с элементами страницы, сохраняя при этом простоту кода.

Пример:

<button hx-get="/delete-item" hx-confirm="Вы уверены?" hx-target="#item-list">Удалить</button>

Здесь, при удалении элемента, сначала появляется окно с запросом на подтверждение. Если пользователь подтверждает действие, отправляется GET-запрос для удаления, а результат запроса обновит список элементов с id item-list.

Возможности кастомизации

Хотя стандартный функционал hx-confirm предоставляет диалоговое окно, его поведение можно кастомизировать. Важно помнить, что hx-confirm по сути генерирует стандартное диалоговое окно браузера, и для изменения стиля, а также для добавления дополнительных возможностей, может потребоваться использование собственных решений для модальных окон.

Можно, например, создать кастомный модальный компонент с помощью JavaScript и использовать его в связке с hx-confirm, чтобы контролировать внешний вид и поведение диалога. Это даст более гибкие возможности для кастомизации.

Пример создания кастомного подтверждения:

<script>
  function customConfirm(message, callback) {
    let modal = document.createElement('div');
    modal.classList.add('modal');
    modal.innerHTML = `
      <div class="modal-content">
        <p>${message}</p>
        <button id="confirmBtn">Подтвердить</button>
        <button id="cancelBtn">Отмена</button>
      </div>
    `;
    document.body.appendChild(modal);

    document.getElementById('confirmBtn').oncl ick = () => {
      callback(true);
      modal.remove();
    };
    document.getElementById('cancelBtn').oncl ick = () => {
      callback(false);
      modal.remove();
    };
  }
</script>

<button hx-post="/delete-item" hx-confirm="Вы уверены, что хотите удалить этот элемент?" hx-on="htmx:beforeRequest:customConfirm">Удалить</button>

В данном случае создаётся кастомный модальный диалог, который используется в событии htmx:beforeRequest.

Работа с различными браузерами

При использовании hx-confirm важно учитывать, что стандартное подтверждение браузера может иметь различный вид и поведение в разных браузерах. В некоторых браузерах окно подтверждения может быть не столь гибким, как в других, и в таких случаях стоит подумать о более кастомизированном решении, как было показано ранее.

Тем не менее, использование hx-confirm с диалогами браузера остаётся простым и быстрым методом для получения подтверждения пользователя, особенно в случаях, когда не требуется сложного взаимодействия.

Пример использования с формами

Хотя чаще всего hx-confirm применяется к кнопкам, его также можно использовать в связке с формами. Важно, чтобы действие формы не выполнялось, пока пользователь не подтвердит своё намерение.

<form hx-post="/update-profile" hx-confirm="Вы уверены, что хотите сохранить изменения?">
  <input type="text" name="username" value="newUsername" />
  <button type="submit">Сохранить изменения</button>
</form>

В данном примере форма будет отправлена только в том случае, если пользователь подтвердит свой выбор. Это может быть полезно для предотвращения случайных отправок данных или изменений.

Заключение

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

Оглавление