hx-sync

Синхронизирует запросы между элементами

Атрибут hx-sync координирует параллельные запросы между элементами.

Синтаксис

Задайте элемент синхронизации и стратегию:

<input hx-post="/validate" hx-sync="closest form:abort">

SELECTOR:STRATEGY

Селектор определяет общую очередь запросов. Стратегия управляет конкурирующими запросами.

Стратегия	Поведение
`drop`	Игнорирует новый запрос, пока выполняется другой. По умолчанию.
`abort`	Отбрасывает этот запрос, если выполняется другой; прерывает его, если начинается ещё один.
`replace`	Прерывает выполняющийся запрос и запускает новый.
`queue`	Ставит новый запрос в очередь.

Выберите, какие запросы сохраняет queue:

Очередь	Поведение
`queue first`	Сохраняет первый ожидающий запрос.
`queue last`	Сохраняет последний ожидающий запрос.
`queue all`	Сохраняет все ожидающие запросы.

Приоритет отправки формы

Без hx-sync проверка и отправка могут выполняться параллельно и конфликтовать.

Прерывайте проверку полей при начале отправки формы:

<form hx-post="/store">
  <input name="title"
         hx-post="/validate"
         hx-trigger="change"
         hx-sync="closest form:abort">
  <button type="submit">Submit</button>
</form>

Поле ввода отслеживает очередь запросов формы. При отправке формы прерывается любой выполняющийся запрос проверки.

Приоритет проверки

Отбрасывайте отправку формы, пока выполняется проверка:

<form hx-post="/store">
  <input name="title"
         hx-post="/validate"
         hx-trigger="change"
         hx-sync="closest form:drop">
  <button type="submit">Submit</button>
</form>

Замена запросов проверки

Добавьте replace к форме, чтобы отменить выполняющуюся проверку перед отправкой:

<form hx-post="/store" hx-sync:inherited="this:replace">
  <input name="title" hx-post="/validate" hx-trigger="change">
  <button type="submit">Submit</button>
</form>

Вместо этого используйте hx-sync="this:abort", чтобы не прерывать выполняющуюся проверку и прерывать отправку.

Сохраняйте последний поиск

Сочетайте delay с replace:

<input type="search"
       hx-get="/search"
       hx-trigger="keyup changed delay:500ms, search"
       hx-target="#search-results"
       hx-sync="this:replace">

delay ожидает, пока ввод не прекратится. replace отменяет все более ранние запросы поиска.

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

См. также

hx-trigger

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/reference/attributes/hx-sync/