Latihan 2: Form dengan HTMX — HTMX

Latihan 2 dari materi Form dengan HTMX di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya <input id="filter" name="filter" value="active"> dan <div id="results">. Biarkan keduanya, lalu:

Di antara keduanya, buat <button> bertuliskan Filter Todos dengan hx-get="/api/todos".
Tambahkan hx-include="#filter" di tombol itu, supaya nilai kotak filter ikut dikirim walau kotaknya di luar tombol. Request-nya jadi GET /api/todos?filter=active.
Tambahkan hx-target="#results", supaya hasilnya masuk ke #results.

Yang dicek:

Masih ada elemen ber-id filter.
<button> punya hx-get persis /api/todos dan hx-include persis #filter.
Kodenya memuat hx-include di luar komentar.

Tulisan tombol dan hx-target gak dicek, tapi tetap tulis seperti langkahnya. Di pratinjau, klik mengirim GET /api/todos?filter=active, yang dijawab 404 karena belum ada contoh balasan, jadi #results tetap kosong.

Hint

Kotak yang bukan bagian dari elemen pengirim gak ikut terkirim, kecuali elemen itu diminta membawanya.
Tombolnya butuh hx-get ke alamatnya dan hx-include berisi selector id kotak itu, lengkap dengan #.
<button hx-get="/api/todos" hx-include="#filter" hx-target="#results">Filter Todos</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Form dengan HTMX — HTMX

Hint

Memperbarui Aplikasi