<hx-partial>

Нацеливается на несколько элементов с помощью одного ответа

Тег <hx-partial> позволяет обновлять несколько элементов с помощью одного ответа, обеспечивая явный контроль над выбором целевых элементов и стратегией замены.

Синтаксис

<hx-partial hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</hx-partial>

<hx-partial hx-target="#count">
    <span>5</span>
</hx-partial>

Атрибуты

hx-target — куда поместить содержимое. Принимает любой CSS-селектор или расширенный селектор htmx, разрешаемый относительно элемента, инициировавшего запрос
id — сокращённая альтернатива hx-target. Выбирает элемент с указанным ID (например, <hx-partial id="messages"> выбирает #messages)
hx-swap — стиль замены (по умолчанию innerHTML)

Необходимо указать либо hx-target, либо id. Если указаны оба, приоритет имеет hx-target.

Относительный выбор целевых элементов

hx-target поддерживает весь набор расширенных селекторов htmx — closest, next, previous, find, findAll — разрешаемых относительно элемента, инициировавшего запрос. Это позволяет серверу указывать структурное намерение без необходимости в стабильных идентификаторах:

<!-- replace the list row containing the button that was clicked -->
<hx-partial hx-target="closest li" hx-swap="outerHTML">
    <li>Updated item <button hx-post="/edit/2">Edit</button></li>
</hx-partial>

<!-- update the error element after the input that triggered validation -->
<hx-partial hx-target="next .error">
    <span class="error">Required</span>
</hx-partial>

Не выбирайте в качестве цели предка, который также заменяется основной операцией замены: частичное содержимое будет вставлено в отсоединённый узел.

Ответы без основного содержимого

Если ответ содержит только теги <hx-partial> (без основного содержимого), основная целевая область остаётся без изменений. Так и задумано: частичные фрагменты являются полноценными разделителями ответа, где каждый раздел самодостаточен, что позволяет серверу явно управлять обновлениями нескольких целевых элементов.

В отличие от hx-swap-oob, это поведение нельзя изменить глобально. Используйте модификатор swapEmpty:true для hx-swap, если нужно очистить основную целевую область:

<button hx-post="/submit" hx-swap="innerHTML swapEmpty:true">Submit</button>

Альтернативный синтаксис

В шаблонных языках, удаляющих неизвестные теги, можно использовать эквивалентную форму <template>:

<template hx type="partial" hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</template>

См. также

hx-swap-oob — альтернатива для простых обновлений на основе ID
Обновления нескольких целевых элементов — полная документация

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