Логотип Tagix
Изображение Изображение

← Назад в FAQ

tgx:swap — Задает стратегию замены HTML после ответа

tgx:swap#

Задает стратегию замены HTML после ответа.

Синтаксис#

<button tgx:ajax-get="/api/v1/domain/status" tgx:target="#result" tgx:swap="#result:innerHTML">Проверить</button>

Пример 1: минимум (копипаст для старта)#

<button tgx:ajax-get="/api/v1/domain/status" tgx:target="#result" tgx:swap="#result:innerHTML">Проверить</button>

Пример 2: реальный сценарий#

<button tgx:ajax-get="/api/v1/notification/transfers" tgx:target="#bell" tgx:swap="#bell:outerHTML">Обновить уведомления</button>
<div id="bell"></div>

Разбор#

Формат: селектор:режим или только режим. Для нескольких узлов: #summary:outerHTML, #list:innerHTML. Работает в связке с tgx:target и ajax-директивой.

Когда использовать#

  • Когда нужно обновлять часть страницы без полной перезагрузки (формы, фильтры, списки, таблицы).
  • Когда нужно контролировать UX запроса: куда вставить ответ, по какому событию отправить и как обработать подтверждение.

Поведение в runtime#

  • Тип: пользовательская директива.
  • В sandbox директива tgx:swap: запрещена.
  • Это HTMX-мост: runtime маппит tgx: в соответствующие data-hx- атрибуты.

Типы данных и приведение#

  • Формат значения: селектор:режим (например #result:innerHTML) или только режим (innerHTML, outerHTML).
  • Для нескольких целей используйте список через запятую: #summary:outerHTML, #list:innerHTML.
  • В текущем runtime поддерживаются только режимы innerHTML и outerHTML.
  • Если режим не распознан, используется innerHTML.
  • Если tgx:swap не задан, применяется стандартная замена целевого узла (innerHTML).

Частые ошибки#

  • Для tgx:swap используйте формат селектор:режим; запись через запятую внутри одной пары (#id,innerHTML) невалидна как одиночная пара.
  • Проверьте, что селектор реально существует на странице в момент ответа.
  • Не смешивайте несовместимые стратегии swap для одного и того же узла.

Проверка перед публикацией#

  • Пример корректно отрабатывает в рабочем шаблоне/тестовой странице проекта.
  • Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
  • Каждая пара записана в формате селектор:режим (например #result:innerHTML).
  • Для списка пар используется запятая между парами (#a:outerHTML, #b:innerHTML), а не внутри одной пары.
  • Проверены режимы innerHTML/outerHTML на реальном ответе API.

См. также#

Связанные статьи

tgx-target tgx-ajax-post tgx-ajax-get

← Назад в FAQ

tgx:swap — Задает стратегию замены HTML после ответа

tgx:swap#

Задает стратегию замены HTML после ответа.

Синтаксис#

<button tgx:ajax-get="/api/v1/domain/status" tgx:target="#result" tgx:swap="#result:innerHTML">Проверить</button>

Пример 1: минимум (копипаст для старта)#

<button tgx:ajax-get="/api/v1/domain/status" tgx:target="#result" tgx:swap="#result:innerHTML">Проверить</button>

Пример 2: реальный сценарий#

<button tgx:ajax-get="/api/v1/notification/transfers" tgx:target="#bell" tgx:swap="#bell:outerHTML">Обновить уведомления</button>
<div id="bell"></div>

Разбор#

Формат: селектор:режим или только режим. Для нескольких узлов: #summary:outerHTML, #list:innerHTML. Работает в связке с tgx:target и ajax-директивой.

Когда использовать#

  • Когда нужно обновлять часть страницы без полной перезагрузки (формы, фильтры, списки, таблицы).
  • Когда нужно контролировать UX запроса: куда вставить ответ, по какому событию отправить и как обработать подтверждение.

Поведение в runtime#

  • Тип: пользовательская директива.
  • В sandbox директива tgx:swap: запрещена.
  • Это HTMX-мост: runtime маппит tgx: в соответствующие data-hx- атрибуты.

Типы данных и приведение#

  • Формат значения: селектор:режим (например #result:innerHTML) или только режим (innerHTML, outerHTML).
  • Для нескольких целей используйте список через запятую: #summary:outerHTML, #list:innerHTML.
  • В текущем runtime поддерживаются только режимы innerHTML и outerHTML.
  • Если режим не распознан, используется innerHTML.
  • Если tgx:swap не задан, применяется стандартная замена целевого узла (innerHTML).

Частые ошибки#

  • Для tgx:swap используйте формат селектор:режим; запись через запятую внутри одной пары (#id,innerHTML) невалидна как одиночная пара.
  • Проверьте, что селектор реально существует на странице в момент ответа.
  • Не смешивайте несовместимые стратегии swap для одного и того же узла.

Проверка перед публикацией#

  • Пример корректно отрабатывает в рабочем шаблоне/тестовой странице проекта.
  • Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
  • Каждая пара записана в формате селектор:режим (например #result:innerHTML).
  • Для списка пар используется запятая между парами (#a:outerHTML, #b:innerHTML), а не внутри одной пары.
  • Проверены режимы innerHTML/outerHTML на реальном ответе API.

См. также#

Связанные статьи

tgx-target tgx-ajax-post tgx-ajax-get