Konfirmasi dan Dialog — HTMX

HTMX menyediakan hx-confirm untuk konfirmasi sebelum request. hx-confirm Hapus User Browser menampilkan dialog confirm() bawaan. Jika user klik Cancel, request

HTMX menyediakan hx-confirm untuk konfirmasi sebelum request.

hx-confirm

<button hx-delete="/api/users/1"
        hx-confirm="Yakin ingin menghapus user ini?">
  Hapus User
</button>

Browser menampilkan dialog confirm() bawaan. Jika user klik Cancel, request dibatalkan.

Custom Confirmation (SweetAlert)

document.body.addEventListener("htmx:confirm", function(event) {
  event.preventDefault()
  Swal.fire({
    title: "Konfirmasi",
    text: event.detail.question,
    showCancelButton: true,
  }).then((result) => {
    if (result.isConfirmed) event.detail.issueRequest()
  })
})

hx-disabled-elt

<form hx-post="/api/submit">
  <button hx-disabled-elt="this">Submit</button>
  <!-- Button disabled selama request -->
</form>

Yang akan kamu pelajari