Атрибут hx-sync

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

Атрибут hx-sync состоит из CSS-селектора, указывающего элемент для синхронизации, с возможным добавлением двоеточия и стратегии синхронизации. Доступные стратегии:

• drop — отменить (игнорировать) этот запрос, если уже существует выполняющийся запрос (значение по умолчанию).
• abort — отменить (игнорировать) этот запрос, если уже существует выполняющийся запрос, и, если это не так, прервать этот запрос, если во время его выполнения происходит другой запрос.
• replace — прервать текущий запрос, если таковой есть, и заменить его этим запросом.
• queue — поставить этот запрос в очередь запросов, связанную с заданным элементом.

Модификатор queue может принимать дополнительный аргумент, указывающий способ работы с очередью:

• queue first — добавить в очередь первый запрос, поступивший во время выполнения текущего запроса.
• queue last — добавить в очередь последний запрос, поступивший во время выполнения текущего запроса.
• queue all — добавить в очередь все запросы, поступившие во время выполнения текущего запроса.

Примечания

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

Этот пример решает проблему гонки между запросом отправки формы и запросом валидации отдельного поля ввода. Обычно, без использования hx-sync, заполнение поля ввода и немедленная отправка формы вызывают два параллельных запроса к /validate и /store. Использование hx-sync="closest form:abort" на поле ввода будет отслеживать запросы на форме и отменять запрос поля ввода, если запрос формы уже существует или начинается во время выполнения запроса поля ввода.

<form hx-post="/store">
  <input id="title" name="title" type="text"
    hx-post="/validate"
    hx-trigger="change"
    hx-sync="closest form:abort">
  <button type="submit">Отправить</button>
</form>

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

<form hx-post="/store">
  <input id="title" name="title" type="text"
    hx-post="/validate"
    hx-trigger="change"
    hx-sync="closest form:drop"
  >
  <button type="submit">Отправить</button>
</form>

При работе с формами, содержащими множество полей ввода, вы можете отдать приоритет запросу отправки перед всеми запросами валидации, используя стратегию replace с атрибутом hx-sync на теге формы. Это отменит все выполняющиеся запросы валидации и отправит только запрос hx-post="/store". Если вы хотите отменить запрос отправки и отдать приоритет любым существующим запросам валидации, вы можете использовать стратегию hx-sync="this:abort" на теге формы.

<form hx-post="/store" hx-sync="this:replace">
  <input id="title" name="title" type="text" hx-post="/validate" hx-trigger="change" />
  <button type="submit">Отправить</button>
</form>

При реализации функционала активного поиска модификатор delay атрибута hx-trigger может быть использован для задержки ввода пользователя и предотвращения отправки нескольких запросов во время набора текста. Однако, как только запрос отправлен, если пользователь начнет снова вводить текст, начнется новый запрос, даже если предыдущий ещё не завершен. Этот пример отменит все выполняющиеся запросы и использует только последний запрос. В случаях, когда поле поиска содержится внутри целевого элемента, использование hx-sync таким образом также помогает снизить вероятность того, что ввод будет заменен, пока пользователь ещё продолжает печатать.

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