hx-get — HTMX — Hyper Sheets

hx-get mengirim GET request saat elemen di-trigger. Dasar Load Data Secara default, response HTML akan menggantikan innerHTML dari elemen yang men-trigger…

hx-get="alamat" membuat sebuah elemen mengirim request GET ke alamat itu saat pemicunya terjadi. GET artinya meminta data, gak mengubah apa pun di server. Balasan HTML-nya ditaruh di dalam elemen itu sendiri, kecuali hx-target menunjuk tempat lain. Bayangin kamu bertanya ke Bu Rini di meja laundry: "Cucian #12 sudah sampai mana?" Kalau kamu gak menunjuk papan, dia menulis jawabannya di kertas yang kamu sodorkan, yaitu kertas pertanyaanmu sendiri. Kalau kamu menunjuk kotak status #12 di papan, jawabannya ditulis di sana.

🧪 Tebakan cepat: Tombol ini gak punya hx-target: <button hx-get="/order/12/status">Cek status</button>. Server membalas Disetrika. Setelah diklik, kata itu muncul di mana? Jawabannya ada di bagian "Tanpa hx-target, balasannya masuk ke elemen itu sendiri".

Kapan request-nya dikirim: pemicu bawaan

Pemicu (trigger) adalah event yang membuat htmx mengirim request. Event itu kejadian di halaman, misalnya klik atau isi kotak yang berubah. Tiap elemen punya pemicu bawaan:

Elemen	Pemicu bawaan	Kapan
`<input>`, `<select>`, `<textarea>`	`change`	nilainya berubah, lalu kamu menekan Enter atau pindah ke kotak lain
`<form>`	`submit`	form dikirim
elemen lain: `<button>`, `<a>`, `<div>`, ...	`click`	diklik

Jadi <button hx-get="..."> jalan saat diklik, tanpa atribut tambahan.

Tanpa hx-target, balasannya masuk ke elemen itu sendiri

<!-- sebelum diklik -->
<button hx-get="/order/12/status">Cek status</button>

<!-- server membalas: Disetrika -->

<!-- sesudah diklik -->
<button hx-get="/order/12/status">Disetrika</button>

Tulisan "Cek status" hilang, diganti "Disetrika", di dalam tombolnya sendiri. Itu jawaban tebakannya. htmx mengganti innerHTML, yaitu isi di antara tag pembuka dan penutup, milik elemen yang memicu request. Tombolnya masih ada, tapi labelnya rusak.

Dengan hx-target, balasannya ke tempat yang kamu tunjuk

Ini order #12 di papan Laundry Bu Rini, sekarang dengan tujuan yang jelas:

<li id="order-12">
  #12 Pak Darto, 3 kg: <span id="status-12">Dicuci</span>
  <button id="cek-12" hx-get="/order/12/status" hx-target="#status-12">
    Cek status
  </button>
</li>

hx-get="/order/12/status": klik tombol, kirim GET /order/12/status.
hx-target="#status-12": balasan Disetrika jadi isi <span id="status-12">. Tombolnya gak disentuh.
Isi hx-target adalah selector CSS, dan elemennya harus sudah ada di halaman. Kalau gak ketemu, htmx gak mengirim request sama sekali. Selector lain (closest, next, this) dibahas di pelajaran hx-target.

Memuat sendiri saat halaman dibuka

Papan Bu Rini punya kotak ringkasan yang harus terisi tanpa diklik siapa pun:

<div id="ringkasan" hx-get="/ringkasan" hx-trigger="load" hx-target="this">
  Memuat ringkasan...
</div>

hx-trigger="load" mengganti pemicu bawaan: request dikirim sekali, begitu elemen ini dimuat di halaman. Tanpa atribut ini, div menunggu klik, dan tulisan "Memuat ringkasan..." gak pernah berganti.
hx-target="this" artinya tujuannya elemen ini sendiri. Hasilnya sama dengan tanpa hx-target, tapi niatnya tertulis jelas.
Server membalas <p>3 order aktif, 1 siap diambil</p>, dan isi div berganti jadi kalimat itu.
Jangan tulis hx-trigger="". Nilai kosong dianggap gak ada, jadi div kembali menunggu klik. Pelajaran hx-trigger membahas pemicu lain.

Yang dikirim ke server

Klik Cek status di atas mengirim request ini:

GET /order/12/status
HX-Request: true
HX-Trigger: cek-12
HX-Target: status-12
HX-Current-URL: http://localhost:8000/papan

HX-Request: true menandai request dari htmx. HX-Trigger adalah id elemen pemicunya, HX-Target id tujuannya, keduanya cuma ada kalau elemennya punya id. HX-Current-URL alamat halaman saat ini.
GET gak punya body. Nilai yang ikut ditaruh di URL: <input name="cari" hx-get="/cari"> yang berisi darto mengirim GET /cari?cari=darto. Nama parameternya diambil dari atribut name.
Server membalas potongan HTML: bukan JSON, bukan halaman utuh.

⚠️ Jebakan yang sering ketemu

Lupa hx-target. Balasannya menimpa isi tombol. Di latihan, tombol Load Users harus punya hx-target="#user-list", kalau gak, tulisan tombolnya yang terganti.
Server membalas halaman utuh. htmx membuang <head>-nya lalu menaruh seluruh isi <body> di target, jadi menu dan judul ikut nongol di dalam span. Balas potongannya saja.
Div tanpa hx-trigger. Div menunggu klik. Untuk kotak yang memuat sendiri, tulis hx-trigger="load", jangan dikosongkan.
Tujuannya belum ada di halaman. Kalau #user-list gak ada, htmx gak mengirim apa-apa.

TL;DR: hx-get="/order/12/status" mengirim request GET saat pemicu bawaan elemennya terjadi: click untuk tombol, div, dan elemen lain, change untuk input, select, dan textarea, submit untuk form. Tanpa hx-target, balasannya mengganti isi elemen itu sendiri, jadi tulis hx-target="#status-12" untuk menunjuk tempat lain. hx-trigger="load" membuat elemen memuat sendiri saat halaman dibuka, dan hx-target="this" menunjuk elemen itu sendiri. GET membawa nilai di URL (/cari?cari=darto) dan header HX-Request: true. Server membalas potongan HTML, bukan halaman utuh.

hx-get — HTMX