Cơ Bản

Cài Đặt

npm install htmx.org

Cách Hoạt Động

HTML-driven	Gọi AJAX từ HTML attributes, không cần JS
Swap content	Server trả về HTML fragment, htmx hoán đổi vào
Progressive	Cải thiện HTML chuẩn; giảm dần nhẹ nhàng
REST-friendly	Hoạt động với bất kỳ framework server-side nào

Attributes

Attributes Request Cốt Lõi

hx-get="/url"	Gửi request GET đến URL
hx-post="/url"	Gửi request POST đến URL
hx-put="/url"	Gửi request PUT đến URL
hx-patch="/url"	Gửi request PATCH đến URL
hx-delete="/url"	Gửi request DELETE đến URL

Attributes Hành Vi

hx-trigger	Sự kiện kích hoạt request
hx-target	Phần tử để hoán đổi nội dung vào
hx-swap	Cách hoán đổi nội dung response
hx-select	Chọn một phần HTML response
hx-vals	Thêm giá trị bổ sung vào request
hx-confirm	Hiển thị hộp thoại xác nhận trước request
hx-disable	Tắt xử lý htmx trên phần tử

Triggers

Cú Pháp Trigger

Feed

Bộ Chỉnh Trigger

changed	Chỉ kích hoạt khi giá trị thay đổi
delay:Ns	Chờ N giây trước khi kích hoạt
throttle:Nms	Throttle một lần mỗi N ms
once	Chỉ kích hoạt lần đầu tiên
from:selector	Lắng nghe trên phần tử khác
every Ns	Poll mỗi N giây
load	Kích hoạt khi phần tử tải
revealed	Kích hoạt khi phần tử cuộn vào tầm nhìn

Targets

Chọn Target

Từ Khóa Target

this	Chính phần tử đó (mặc định)
closest <sel>	Tổ tiên gần nhất khớp selector
find <sel>	Con cháu đầu tiên khớp selector
next <sel>	Anh em tiếp theo khớp selector
previous <sel>	Anh em trước đó khớp selector

Swapping

Chiến Lược Swap

innerHTML	Thay thế nội dung bên trong (mặc định)
outerHTML	Thay thế toàn bộ phần tử target
afterbegin	Chèn vào đầu bên trong target
beforeend	Thêm vào cuối bên trong target
beforebegin	Chèn trước target
afterend	Chèn sau target
delete	Xóa phần tử target
none	Không swap, chỉ kích hoạt sự kiện

Bộ Chỉnh Swap

Headers

Request Headers (htmx gửi)

HX-Request	Luôn là "true" cho request htmx
HX-Target	ID của phần tử target
HX-Trigger	ID của phần tử kích hoạt
HX-Trigger-Name	Tên của phần tử kích hoạt
HX-Current-URL	URL hiện tại của trình duyệt
HX-Prompt	Phản hồi người dùng từ hx-prompt

Response Headers (server gửi)

HX-Redirect	Redirect phía client đến URL
HX-Refresh	Tải lại toàn trang nếu là "true"
HX-Retarget	Ghi đè hx-target bằng CSS selector
HX-Reswap	Ghi đè chiến lược hx-swap
HX-Trigger	Kích hoạt sự kiện phía client
HX-Push-Url	Đẩy URL vào lịch sử trình duyệt

Events

Sự Kiện Vòng Đời

htmx:configRequest	Trước request; sửa đổi params/headers
htmx:beforeRequest	Ngay trước cuộc gọi AJAX
htmx:afterRequest	Sau khi request hoàn tất
htmx:beforeSwap	Trước khi nội dung được hoán đổi vào
htmx:afterSwap	Sau khi nội dung được hoán đổi vào
htmx:afterSettle	Sau khi DOM ổn định từ swap
htmx:responseError	Server trả về trạng thái lỗi

Lắng Nghe Sự Kiện

document.body.addEventListener("htmx:afterSwap", (e) => {
  console.log("Swapped:", e.detail.target);
});

// Cancel a request
document.body.addEventListener("htmx:configRequest", (e) => {
  if (!confirm("Proceed?")) e.preventDefault();
});

Extensions

Sử Dụng Extensions

Extensions Phổ Biến

json-enc	Encode body request dạng JSON
loading-states	Quản lý CSS class trạng thái loading
head-support	Merge tag từ response
preload	Preload link khi mousedown/hover
sse	Hỗ trợ Server-Sent Events
ws	Hỗ trợ WebSocket
response-targets	Target khác nhau cho response lỗi

Indicators

Chỉ Báo Loading

CSS Indicator

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

htmx thêm class htmx-request vào phần tử trong khi request

Vô Hiệu Hóa Trong Khi Request

hx-disabled-elt thêm thuộc tính disabled trong khi request

Mẫu Phổ Biến

Tìm Kiếm Trực Tiếp

#results" />

Cuộn Vô Hạn

Loading more...

Xóa Có Xác Nhận

Chỉnh Sửa Nội Tuyến

Click to edit this text

THAM KHẢO NHANH HTMX