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

← Назад

tgx:target#

Определяет узел-получатель ответа.

Синтаксис#

<div tgx:target="#result"></div>

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

<div tgx:target="#result"></div>

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

<button tgx:ajax-get="/api/v1/data" tgx:target="#result">Обновить</button>

Разбор#

Если не указан, применяется стандартное поведение HTMX.

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

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

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

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

Параметры#

Обязательные#

  • tgx:target — CSS-селектор узла-получателя ответа.

По умолчанию#

  • По умолчанию this.

Типы#

  • Строка CSS-селектора.

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

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

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

  • Пример корректно отрабатывает в рабочем шаблоне/тестовой странице проекта.
  • Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.

См. также#