hx-target — HTMX — Hyper Sheets

hx-target menentukan elemen mana yang akan menerima response HTML. CSS Selector Load Special Values Load Update Row Load Load find

hx-target menentukan elemen mana yang menerima balasan HTML dari server. Isinya selector CSS biasa, atau kata kunci khusus htmx yang menunjuk elemen relatif terhadap elemen yang mengirim request. Bayangin Bu Rini menyuruh asistennya menulis status di papan order. Dia bisa bilang "tulis di kotak status #12" (alamat pasti, seperti id), "tulis di baris tempat tombol ini" (relatif), atau "tulis di kotak status tepat sebelum tombol ini" (relatif juga). Perintah yang relatif bisa dipakai di semua baris tanpa menyebut nomor.

🧪 Tebakan cepat: Di papan order, tombol Cek status di tiap baris punya hx-target="next .status". Kamu mengklik tombol di baris #12. Status baris mana yang berubah? Jawabannya ada di bagian "Kata kunci relatif".

Selector CSS biasa

Ini papan order Bu Rini, dengan satu tombol per baris:

<ul id="papan-order">
  <li id="order-12">
    <b>#12 Pak Darto</b>
    <span id="status-12" class="status">Dicuci</span>
    <button hx-get="/order/12/status" hx-target="#status-12">Cek status</button>
  </li>
  <li id="order-13">
    <b>#13 Mbak Wulan</b>
    <span id="status-13" class="status">Siap diambil</span>
    <button hx-get="/order/13/status" hx-target="#status-13">Cek status</button>
  </li>
</ul>

hx-target="#status-12": id, cara paling jelas. Tiap tombol menunjuk kotak statusnya sendiri, jadi tiap baris butuh id dan nilai yang berbeda.
Selector apa pun boleh: .status, #papan-order li, body. Kalau selector-nya cocok dengan banyak elemen, htmx memakai yang pertama di halaman. hx-target=".status" di tombol #13 mengubah status #12.
Elemennya harus sudah ada di halaman saat tombol diklik.

Kata kunci relatif

Kata kunci ini dihitung dari tombol yang diklik. Untuk tombol di baris #12 di atas:

`hx-target`	Elemen yang dipilih
`this`	elemen yang menulis `hx-target` itu, di sini tombolnya sendiri
`closest li`	`<li id="order-12">`: induk terdekat yang cocok, mulai dari tombol itu sendiri lalu naik
`previous .status`	`.status` terakhir sebelum tombol: `#status-12`
`next .status`	`.status` pertama sesudah tombol di seluruh halaman: `#status-13`
`previous` / `next`	saudara tepat sebelum / sesudah tombol (`next` di sini gak ada)
`find .status`	keturunan elemen itu yang cocok. Tombol gak punya isi seperti itu, jadi gak ketemu

next .status mencari ke depan di seluruh halaman, bukan cuma di dalam baris. Dari tombol #12, .status pertama sesudahnya ada di baris #13. Jadi status #13 yang berubah, padahal yang diklik #12. Itu jawaban tebakannya. Untuk baris yang sama, pakai previous .status: status ada sebelum tombol di barisnya sendiri.

Satu atribut untuk semua baris

Kata kunci relatif membuat semua baris memakai nilai yang sama, tanpa id per baris:

<li id="order-12">
  <b>#12 Pak Darto</b> <span class="status">Dicuci</span>
  <button hx-get="/order/12/status" hx-target="previous .status">Cek status</button>
</li>

previous .status di baris mana pun menunjuk status di baris itu.
closest li menunjuk seluruh baris. Hati-hati: balasannya mengganti seluruh isi <li>, jadi nama dan tombolnya ikut hilang. Pakai ini kalau server membalas isi baris yang lengkap.

hx-target diwariskan

hx-target yang ditulis di elemen induk berlaku untuk semua keturunannya yang gak punya hx-target sendiri:

<ul hx-target="closest li">
  <li>... <button hx-get="/order/12/kartu">Tandai siap</button></li>
  <li>... <button hx-get="/order/13/kartu">Tandai siap</button></li>
</ul>

Tiap tombol memakai closest li milik <ul>, tapi dihitung dari tombol yang diklik, jadi tiap tombol mendapat barisnya sendiri.
Pengecualian: this yang diwariskan menunjuk elemen yang menulisnya. <div hx-target="this"> membuat tombol di dalamnya menargetkan div itu.

Kalau target-nya gak ketemu

Kalau hx-target gak cocok dengan elemen apa pun, htmx memicu event htmx:targetError dan gak mengirim request sama sekali. Gak ada error yang tampil di halaman, tombolnya cuma diam. Penyebab paling sering: lupa #. hx-target="box-1" mencari elemen bertag <box-1>, bukan id box-1.

⚠️ Jebakan yang sering ketemu

Lupa tanda #. hx-target="box-1" gak menemukan apa pun, jadi request-nya gak dikirim. Di latihan, nilainya harus persis #box-1 dan #box-2.
Dua tombol menunjuk tempat yang sama. Di latihan, tombol /api/content-1 mengisi #box-1 dan tombol /api/content-2 mengisi #box-2, masing-masing ke kotaknya sendiri.
next melompat ke baris lain. next .status mencari di seluruh halaman. Untuk baris yang sama pakai previous .status atau closest li.
closest li menghapus isi baris. Balasan satu kata mengganti nama dan tombolnya juga.

TL;DR: hx-target memilih elemen penerima balasan. Selector CSS biasa (#status-12, .status) memakai elemen pertama yang cocok di halaman, dan id harus ditulis dengan #. Kata kunci relatif dihitung dari elemen yang diklik: this (elemen itu sendiri), closest li (induk terdekat), previous .status dan next .status (mencari ke belakang atau ke depan di seluruh halaman), find .status (keturunan). hx-target diwariskan ke elemen di dalamnya. Kalau target-nya gak ketemu, htmx gak mengirim request.

hx-target — HTMX