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">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">Submit</button>
</form>

При работе с формами, содержащими множество полей ввода, вы можете сделать запрос отправки формы приоритетным над всеми запросами валидации полей ввода, используя стратегию hx-sync replace на теге формы. Это отменит все выполнившиеся запросы валидации и вызовет только запрос 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">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">