Spec-Zone.ru › htmx

События

Htmx предоставляет обширную систему событий, которая может быть использована для изменения и улучшения поведения. События перечислены ниже.

Событие - htmx:abort

Это событие отличается от других событий: htmx не вызывает его, а слушает его.

Если вы отправите событие htmx:abort элементу, выполняющему запрос, он прервёт запрос:

<button id="request-button" hx-post="/example">Issue Request</button>
<button onclick="htmx.trigger('#request-button', 'htmx:abort')">Cancel Request</button>

Событие - htmx:afterOnLoad

Это событие срабатывает после завершения AJAX onload. Обратите внимание, что это не означает, что содержимое уже обменено или установлено, только что запрос завершен.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса

Событие - htmx:afterProcessNode

Это событие срабатывает после того, как htmx инициализировал узел DOM. Это может быть полезно для расширений, чтобы добавить дополнительные функции в узел.

Подробности
  • detail.elt - элемент, который отправил запрос

Событие - htmx:afterRequest

Это событие срабатывает после завершения AJAX запроса, как в случае успешного запроса (хотя он может вернуть ошибку удаленного сервера, например, код ошибки 404), так и в случае сетевой ошибки. Это событие может быть использовано совместно с htmx:beforeRequest, чтобы обернуть поведение вокруг цикла запроса.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса
  • detail.successful - true, если ответ имеет код статуса 20x или отмечен как detail.isError = false в событии htmx:beforeSwap, иначе false
  • detail.failed - true, если ответ не имеет код статуса 20x или отмечен как detail.isError = true в событии htmx:beforeSwap, иначе false

Событие - htmx:afterSettle

Это событие срабатывает после того, как DOM установился.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса

Событие - htmx:afterSwap

Это событие срабатывает после того, как новое содержимое было вставлено в DOM.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса

Событие - htmx:beforeCleanupElement

Это событие срабатывает до того, как htmx отключает элемент или удаляет его из DOM.

Подробности
  • detail.elt - очищенный элемент

Событие - htmx:beforeOnLoad

Это событие срабатывает перед выполнением обработки любого ответа. Если событие отменено, замена не произойдёт.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса

Событие - htmx:beforeProcessNode

Это событие срабатывает перед тем, как htmx инициализирует узел DOM и обработает все его hx- атрибуты. Это даёт расширениям и другому внешнему коду возможность изменить содержимое узла DOM перед его обработкой.

Подробности
  • detail.elt - элемент, который отправил запрос

Событие - htmx:beforeRequest

Это событие срабатывает перед отправкой AJAX запроса. Если событие отменено, запрос не будет выполнен.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса

Событие - htmx:beforeSend

Это событие срабатывает непосредственно перед отправкой запроса. Вы не можете отменить запрос с помощью этого события.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - цель запроса
  • detail.requestConfig - конфигурация AJAX запроса

Событие - htmx:beforeSwap

Это событие срабатывает перед тем, как новое содержимое будет вставлено в DOM. Если событие отменено, замена не произойдёт.

Вы можете изменить поведение по умолчанию, изменив свойства shouldSwap и target детали события. Подробности о настройке замены см. в документации настройки замены.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.requestConfig - конфигурация AJAX запроса
  • detail.shouldSwap - будет ли содержимое заменено (по умолчанию false для ответов, не имеющих код 200)
  • detail.ignoreTitle - если true любой тег title в ответе будет проигнорирован
  • detail.target - целевой элемент замены

Событие - htmx:beforeTransition

Это событие срабатывает перед выполнением замены, обернутой переходом представления. Если событие отменено, переход представления не произойдёт, и вместо этого будет выполнена обычная логика замены.

Подробности
  • detail.elt - элемент, который отправил запрос
  • detail.xhr - XMLHttpRequest
  • detail.requestConfig - конфигурация AJAX запроса
  • detail.shouldSwap - будет ли содержимое заменено (по умолчанию false для ответов, не имеющих код 200)
  • detail.target - целевой элемент замены

Событие - htmx:configRequest

Это событие срабатывает после того, как htmx собрал параметры для включения в запрос. Оно может быть использовано для включения или обновления параметров, которые htmx отправит:

document.body.addEventListener('htmx:configRequest', function(evt) {
evt.detail.parameters['auth_token'] = getAuthToken(); // add a new parameter into the mix
});

Обратите внимание, что если значение элемента ввода встречается более одного раза, значение в объекте parameters будет массивом, а не одиночным значением.

Подробности
  • detail.parameters - параметры, которые будут отправлены в запросе
  • detail.unfilteredParameters - параметры, найденные до фильтрации по hx-select
  • detail.headers - заголовки запроса
  • detail.elt - элемент, который инициировал запрос
  • detail.target - цель запроса
  • detail.verb - используемый HTTP-метод

Событие - htmx:confirm

Это событие срабатывает сразу после срабатывания триггера на элементе. Оно позволяет отменить (или отложить) отправку AJAX запроса. Если вы вызовете preventDefault() на событии, запрос не будет отправлен. Объект detail содержит функцию evt.detail.issueRequest(), которая может быть использована для отправки фактического AJAX запроса позже. Объединение этих двух функций позволяет создать асинхронный диалог подтверждения.

Вот пример с использованием sweet alert:

document.body.addEventListener('htmx:confirm', function(evt) {
evt.preventDefault();
swal({
      title: "Are you sure?",
      text: "Are you sure you are sure?",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((confirmed) => {
if (confirmed) {
evt.detail.issueRequest();
      }
   });
});
Подробности

{target: target, elt: elt, path: path, verb: verb, triggeringEvent: event, etc: etc, issueRequest: issueRequest}

  • detail.elt - интересующий элемент
  • detail.etc - дополнительная информация о запросе (практически не используется)
  • detail.issueRequest - функция без аргументов, которую можно вызвать для отправки запроса (должна быть использована в паре с evt.preventDefault()!)
  • detail.path - путь запроса
  • detail.target - цель запроса
  • detail.triggeringEvent - исходное событие, которое инициировало этот запрос
  • detail.verb - метод запроса (например, GET)

Событие - htmx:historyCacheError

Это событие срабатывает, когда попытка сохранить кэш в localStorage терпит неудачу.

Подробности
  • detail.cause - исключение Exception, которое было вызвано при попытке сохранить историю в localStorage

Событие - htmx:historyCacheMiss

Это событие срабатывает, когда происходит промах в кэше при восстановлении истории.

Подробности
  • detail.xhr - XMLHttpRequest, который получит удалённое содержимое для восстановления
  • detail.path - путь и параметры запроса восстанавливаемой страницы

Событие - htmx:historyCacheMissError

Это событие срабатывает, когда происходит промах в кэше, и ответ был получен от сервера для восстановления содержимого, но ответ содержит ошибку (например, 404)

Подробности
  • detail.xhr - XMLHttpRequest
  • detail.path - путь и параметры запроса восстанавливаемой страницы

Событие - htmx:historyCacheMissLoad

Это событие срабатывает, когда происходит промах в кэше, и ответ успешно получен от сервера для восстановления содержимого.

Подробности
  • detail.xhr - XMLHttpRequest
  • detail.path - путь и параметры запроса восстанавливаемой страницы

Событие - htmx:historyRestore

Это событие срабатывает, когда htmx обрабатывает действие восстановления истории.

Подробности
  • detail.path - путь и параметры запроса восстанавливаемой страницы

Событие - htmx:beforeHistorySave

Это событие срабатывает, когда htmx обрабатывает действие восстановления истории.

Подробности
  • detail.path - путь и параметры запроса восстанавливаемой страницы
  • detail.historyElt - элемент истории, в который восстанавливается содержимое
Подробности
  • detail.config - конфигурация, которая будет передана конструктору EventSource

Событие - htmx:load

Это событие срабатывает, когда новый узел загружается в DOM с помощью htmx.

Подробности
  • detail.elt - добавленный элемент

Событие - htmx:noSSESourceError

Это событие срабатывает, когда элемент ссылается на событие SSE в своем триггере, но не определен родительский источник SSE.

Подробности
  • detail.elt - элемент с неверным триггером SSE

Событие - htmx:oobAfterSwap

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

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - целевой элемент запроса
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:oobBeforeSwap

Это событие срабатывает в рамках обмена вне зоны видимости и ведет себя идентично событию обмена вне зоны видимости и событию перед обменом

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.xhr - XMLHttpRequest
  • detail.requestConfig - конфигурация AJAX-запроса
  • detail.shouldSwap - будет ли содержимое заменено (по умолчанию false для кодов ответов, отличных от 200)
  • detail.target - целевой элемент обмена

Событие - htmx:oobErrorNoTarget

Это событие срабатывает, когда обмен вне зоны видимости не имеет соответствующего элемента в DOM для замены.

Подробности
  • detail.content - элемент с неверным обменом id

Событие - htmx:onLoadError

Это событие срабатывает, когда возникает ошибка во время обработки AJAX-вызова

Подробности
  • detail.xhr - XMLHttpRequest
  • detail.elt - элемент, который инициировал запрос
  • detail.target - целевой элемент запроса
  • detail.exception - произошедшая исключительная ситуация
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:prompt

Это событие срабатывает после отображения запроса пользователю с атрибутом hx-prompt. Если это событие отменено, AJAX-запрос не будет выполнен.

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.target - целевой элемент запроса
  • detail.prompt - ответ пользователя на запрос

Событие - htmx:beforeHistoryUpdate

Это событие срабатывает перед выполнением обновления истории. Его можно использовать для изменения path или type используемых для обновления истории.

Подробности
  • detail.history - path и type (push, replace) для обновления истории
  • detail.elt - элемент, который инициировал запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - целевой элемент запроса
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:pushedIntoHistory

Это событие срабатывает после того, как URL был добавлен в историю.

Подробности
  • detail.path - путь и параметры URL, добавленного в историю

Событие - htmx:replacedInHistory

Это событие срабатывает после того, как URL был заменен в истории.

Подробности
  • detail.path - путь и параметры URL, заменённого в истории

Событие - htmx:responseError

Это событие срабатывает при возникновении HTTP-ошибки ответа

Подробности
  • detail.xhr - XMLHttpRequest
  • detail.elt - элемент, который инициировал запрос
  • detail.target - целевой элемент запроса
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:sendError

Это событие срабатывает, когда ошибка сети предотвращает выполнение HTTP-запроса

Подробности
  • detail.xhr - XMLHttpRequest
  • detail.elt - элемент, который инициировал запрос
  • detail.target - целевой элемент запроса
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:sseError

Это событие срабатывает при возникновении ошибки с источником SSE

Подробности
  • detail.elt - элемент с некорректным источником SSE
  • detail.error - ошибка
  • detail.source - источник SSE

Событие - htmx:swapError

Это событие срабатывает при возникновении ошибки во время фазы обмена

Подробности
  • detail.xhr - XMLHttpRequest
  • detail.elt - элемент, который инициировал запрос
  • detail.target - целевой элемент запроса
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:targetError

Это событие срабатывает при использовании плохого селектора для атрибута hx-target (например, идентификатор элемента без предшествующего #)

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.target - некорректный CSS-селектор

Событие - htmx:timeout

Это событие срабатывает при истечении срока ожидания запроса. Оно оборачивает стандартное событие timeout объекта XMLHttpRequest.

Время ожидания можно установить с помощью htmx.config.timeout или на уровне элемента с помощью hx-request

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.xhr - XMLHttpRequest
  • detail.target - целевой элемент запроса
  • detail.requestConfig - конфигурация AJAX-запроса

Событие - htmx:trigger

Это событие срабатывает всякий раз, когда будет выполнен AJAX-запрос, даже если AJAX-запрос не указан. Оно предназначено в первую очередь для того, чтобы hx-trigger мог выполнять клиентские скрипты; AJAX-запросы имеют более подробные события, такие как htmx:beforeRequest или htmx:afterRequest.

Подробности
  • detail.elt - элемент, который инициировал запрос

Событие - htmx:validateUrl

Это событие срабатывает перед отправкой запроса, позволяя вам проверить URL, который htmx собирается запросить. Если preventDefault() вызывается на событии, запрос не будет выполнен.

document.body.addEventListener('htmx:validateUrl', function (evt) {
// only allow requests to the current server as well as myserver.com
if (!evt.detail.sameHost && evt.detail.url.hostname !== "myserver.com") {
evt.preventDefault();
  }
});
Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.url - объект URL, представляющий URL, к которому будет отправлен запрос.
  • detail.sameHost - будет true если запрос направлен на тот же хост, что и документ

Событие - htmx:validation:validate

Это событие срабатывает перед проверкой элемента. Его можно использовать с методом elt.setCustomValidity() для реализации пользовательских правил проверки.

<form hx-post="/test">
  <input _="on htmx:validation:validate
               if my.value != 'foo'
                  call me.setCustomValidity('Please enter the value foo')
               else
                  call me.setCustomValidity('')"
name="example">
</form>
Подробности
  • detail.elt - элемент, который инициировал запрос

Событие - htmx:validation:failed

Это событие срабатывает, когда проверка элемента завершается неудачно.

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.message - сообщение об ошибке проверки
  • detail.validity - объект проверки, который содержит свойства, описывающие, как проверка завершилась неудачно

Событие - htmx:validation:halted

Это событие срабатывает, когда запрос приостановлен из-за ошибок проверки.

Подробности
  • detail.elt - элемент, который инициировал запрос
  • detail.errors - массив объектов ошибок с невалидными элементами и ошибками, связанными с ними

Событие - htmx:xhr:abort

Это событие срабатывает при отмене AJAX-запроса

Подробности
  • detail.elt - элемент, который инициировал запрос

Событие - htmx:xhr:loadstart

Это событие срабатывает при начале AJAX-запроса

Подробности
  • detail.elt - элемент, который инициировал запрос

Событие - htmx:xhr:loadend

Это событие срабатывает по завершении AJAX-запроса

Подробности
  • detail.elt - элемент, который инициировал запрос

Событие - htmx:xhr:progress

Это событие периодически срабатывает, когда AJAX-запрос, поддерживающий прогресс, находится в процессе выполнения

Подробности
  • detail.elt - элемент, который инициировал запрос

Licensed under the Zero-Clause BSD License.
https://htmx.org/events/

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API