hx-status

Пример

<!-- Show validation errors in a specific container -->
<form hx-post="..."
      hx-status:422="target:#errors select:#validation-errors">
  ...
</form>

<!-- Suppress swap on server errors -->
<button hx-post="..." hx-status:5xx="swap:none">Save</button>

<!-- Push a custom URL on 201 Created -->
<form hx-post="..." hx-status:201="push:/items/new">...</form>

Шаблоны

Код состояния указывается после двоеточия: hx-status:CODE="...".

Поддерживаются точные коды, подстановочные знаки для одной цифры (x) и подстановочные знаки для диапазонов (xx):

<div hx-get="..."
     hx-status:404="select:#not-found"
     hx-status:50x="select:#bad-gateway"
     hx-status:5xx="swap:none">
  ...
</div>

Проверка выполняется в порядке от наиболее конкретного шаблона к наименее конкретному: точное совпадение (404), затем подстановочный знак для двух цифр (50x), затем для одной цифры (5xx).

Модификаторы

Значение состоит из пар key:value, разделённых пробелами.

<form hx-post="..."
      hx-status:422="swap:innerHTML target:#errors select:#validation-errors"
      hx-status:500="swap:none push:false">
  ...
</form>

swap

Стиль замены для этого кода состояния. Допустимые значения см. в разделе hx-swap.

<div hx-get="..." hx-status:500="swap:none"></div>

target

CSS-селектор целевого элемента для замены. Переопределяет hx-target.

<div hx-get="..." hx-status:422="target:#error-container"></div>

select

CSS-селектор для выбора содержимого из ответа. Переопределяет hx-select.

<div hx-get="..." hx-status:422="select:#validation-errors"></div>

push

Добавляет URL в историю браузера. true/false или строка URL.

<div hx-get="..." hx-status:5xx="push:false"></div>
<form hx-post="/items" hx-status:201="push:/items/new"></form>

replace

Заменяет текущий URL в истории браузера. true/false или строка URL.

<div hx-get="..." hx-status:301="replace:/new-location"></div>

transition

Использует API переходов между представлениями для этой замены. true/false.

<div hx-get="..." hx-status:200="transition:true"></div>

Примечания

• Значения переопределяют заголовки ответа (HX-Retarget, HX-Reswap, HX-Reselect и т. д.)
• Если hx-status не задан, htmx выполняет замену для всех ответов, кроме 204 и 304

См. также

• hx-swap
• hx-select
• hx-target
• htmx.config.noSwap

• htmx:response:error