HTMX — การพัฒนาเว็บแบบ Hypermedia สมัยใหม่

คู่มือฉบับสมบูรณ์สำหรับนักพัฒนาเว็บที่ต้องการสร้างแอปพลิเคชันแบบ Interactive โดยไม่พึ่งพา JavaScript Framework ขนาดใหญ่

ส่วนที่ 1: บทนำและแนวคิดพื้นฐาน

1.1 HTMX คืออะไร? — ที่มาและปรัชญาการออกแบบ

HTMX คือ JavaScript Library ขนาดเล็ก (~14KB เมื่อ gzip) ที่ช่วยให้ HTML Element ธรรมดาสามารถส่ง HTTP Request และอัปเดต DOM ได้โดยตรง โดยไม่ต้องเขียน JavaScript เพิ่มเติม หลักการทำงานของ HTMX คือการ ขยายความสามารถของ HTML ให้เกินขอบเขตที่มาตรฐานดั้งเดิมกำหนดไว้

1.1.1 ประวัติและที่มา

HTMX พัฒนาต่อยอดจากโปรเจกต์ intercooler.js ซึ่งสร้างโดย Carson Gross ในปี 2013 ก่อนที่จะเขียนใหม่ทั้งหมดและเปลี่ยนชื่อเป็น HTMX ในปี 2020 แนวคิดหลักมาจากการตั้งคำถามว่า "ทำไม HTML จึงจำกัดให้เฉพาะ <a> และ <form> เท่านั้นที่ส่ง HTTP Request ได้?"

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#3c3836',
    'primaryTextColor': '#ebdbb2',
    'primaryBorderColor': '#a89984',
    'lineColor': '#d79921',
    'secondaryColor': '#504945',
    'tertiaryColor': '#282828',
    'background': '#282828',
    'mainBkg': '#3c3836',
    'nodeBorder': '#a89984',
    'clusterBkg': '#32302f',
    'titleColor': '#ebdbb2',
    'edgeLabelBackground': '#3c3836',
    'fontSize': '14px'
  }
}}%%
flowchart TD
    subgraph era1["ยุค 2013 (Era: 2013)"]
        direction LR
        A["intercooler.js - Carson Gross สร้าง - First Version"]
    end
    subgraph era2["ยุค 2015-2019 (Era: 2015-2019)"]
        direction LR
        B["intercooler.js v1.x - เพิ่ม Attributes - ปรับปรุง API"]
        C["ชุมชนเติบโต - Community Grows"]
    end
    subgraph era3["ยุค 2020 (Era: 2020)"]
        direction LR
        D["เขียนใหม่ทั้งหมด - Rewrite from Scratch"]
        E["เปลี่ยนชื่อเป็น HTMX - Rename to HTMX"]
    end
    subgraph era4["ยุค 2021-ปัจจุบัน (Era: 2021-Present)"]
        direction LR
        F["HTMX v1.x - Stable Release"]
        G["HTMX v2.0 - Breaking Changes - Modern API"]
        H["GitHub Stars > 40K - Popularity Surge"]
    end
    era1 --> era2 --> era3 --> era4
    B --> C
    D --> E
    F --> G --> H
    style A fill:#458588,color:#ebdbb2,stroke:#83a598
    style B fill:#458588,color:#ebdbb2,stroke:#83a598
    style C fill:#689d6a,color:#ebdbb2,stroke:#8ec07c
    style D fill:#d79921,color:#282828,stroke:#fabd2f
    style E fill:#d79921,color:#282828,stroke:#fabd2f
    style F fill:#b16286,color:#ebdbb2,stroke:#d3869b
    style G fill:#cc241d,color:#ebdbb2,stroke:#fb4934
    style H fill:#98971a,color:#282828,stroke:#b8bb26

รูปที่ 1.1: ไทม์ไลน์การพัฒนา HTMX จาก intercooler.js สู่ปัจจุบัน

1.1.2 ปรัชญาการออกแบบ (Design Philosophy)

HTMX ยึดถือหลักการ "HTML-First" ซึ่งมีแนวคิดสำคัญดังนี้:

• Locality of Behavior — พฤติกรรมของ Element ควรอยู่ใกล้กับ Element นั้นในโค้ด HTML ไม่กระจัดกระจายไปยังไฟล์ JavaScript แยกต่างหาก
• Progressive Enhancement — ระบบควรทำงานได้แม้ปิด JavaScript (อย่างน้อยในระดับพื้นฐาน)
• Hypermedia as the Engine — Server เป็นผู้ควบคุม State ของแอปพลิเคชัน ไม่ใช่ Client
• Simplicity over Complexity — ลดความซับซ้อนในโค้ด Client-side ให้น้อยที่สุด

<!-- ตัวอย่าง: ปรัชญา Locality of Behavior -->
<!-- ❌ วิธีเดิม: พฤติกรรมแยกออกจาก Element -->
<button id="load-btn">โหลดข้อมูล</button>
<script>
  document.getElementById('load-btn').addEventListener('click', function() {
    fetch('/api/data').then(r => r.json()).then(data => {
      // อัปเดต DOM...
    });
  });
</script>

<!-- ✅ วิธี HTMX: พฤติกรรมอยู่ที่ Element โดยตรง -->
<button hx-get="/api/data" hx-target="#result" hx-swap="innerHTML">
  โหลดข้อมูล
</button>
<div id="result"></div>

1.2 ปัญหาของ JavaScript-Heavy Frameworks — ทำไมเราถึงต้องการทางเลือกอื่น

1.2.1 ปัญหาหลักของ SPA Framework สมัยใหม่

การพัฒนาเว็บด้วย Single Page Application (SPA) framework อย่าง React, Vue, หรือ Angular มาพร้อมกับ trade-off ที่สำคัญ:

1.2.2 ต้นทุนที่ซ่อนอยู่ของ JavaScript (Hidden Costs)

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#3c3836',
    'primaryTextColor': '#ebdbb2',
    'primaryBorderColor': '#a89984',
    'lineColor': '#d79921',
    'background': '#282828',
    'mainBkg': '#3c3836',
    'fontSize': '14px'
  }
}}%%
pie title ต้นทุนการพัฒนา SPA (SPA Development Cost Distribution)
    "Bundle Size / Network" : 20
    "State Management" : 25
    "Build Tooling" : 15
    "Testing Complexity" : 20
    "Team Learning Curve" : 20

รูปที่ 1.2: การกระจายต้นทุนในการพัฒนา SPA

1.2.3 เมื่อ HTMX เป็นคำตอบที่ดีกว่า

HTMX เหมาะสมอย่างยิ่งสำหรับ:

• แอปพลิเคชันแบบ CRUD ที่ต้องการ Interactive แต่ไม่ซับซ้อนมาก
• Dashboard และ Admin Panel ที่อัปเดตข้อมูลแบบ Real-time
• เว็บไซต์ที่ต้องการ SEO เป็นหลักแต่ต้องการ Interactivity บางส่วน
• ทีมขนาดเล็ก ที่ต้องการ Full-stack ด้วยคนเดียว
• Legacy Application ที่ต้องการ Modernize โดยไม่เขียนใหม่ทั้งหมด

1.3 Hypermedia as the Engine of Application State (HATEOAS)

1.3.1 ความหมายของ HATEOAS

HATEOAS (Hypermedia as the Engine of Application State) คือ constraint หนึ่งของ REST Architecture ที่ระบุว่า Client ไม่ควรรู้จัก URL หรือ Action ล่วงหน้า แต่ควรค้นพบผ่าน Hypermedia ที่ Server ส่งกลับมา

กล่าวง่าย ๆ คือ Server ส่ง HTML กลับมาพร้อมกับ ลิงก์ และ ฟอร์ม ที่บอกว่า Client สามารถทำอะไรได้บ้าง ณ ขณะนั้น

<!-- ตัวอย่าง HATEOAS Response จาก Server -->
<!-- เมื่อ User ยังไม่ได้ Login -->
<div class="user-actions">
  <a hx-get="/login">เข้าสู่ระบบ</a>
  <a hx-get="/register">สมัครสมาชิก</a>
</div>

<!-- เมื่อ User Login แล้ว -->
<div class="user-actions">
  <a hx-get="/profile">โปรไฟล์</a>
  <a hx-get="/orders">คำสั่งซื้อ</a>
  <button hx-post="/logout">ออกจากระบบ</button>
</div>

1.3.2 HTMX กับ HATEOAS ในทางปฏิบัติ

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#3c3836',
    'primaryTextColor': '#ebdbb2',
    'primaryBorderColor': '#a89984',
    'lineColor': '#d79921',
    'background': '#282828',
    'mainBkg': '#3c3836',
    'clusterBkg': '#32302f',
    'fontSize': '14px'
  }
}}%%
sequenceDiagram
    participant Browser as 🌐 Browser (Client)
    participant Server as 🖥️ Server
    Browser->>Server: GET /products
    Server-->>Browser: HTML + hx-get="/products/1" links
    Note over Browser: แสดงรายการสินค้า
(Display product list)
    Browser->>Server: hx-get="/products/1"
    Server-->>Browser: HTML Fragment ของสินค้า + hx-post="/cart/add"
    Note over Browser: แสดงรายละเอียดสินค้า
(Display product detail)
    Browser->>Server: hx-post="/cart/add" (id=1)
    Server-->>Browser: HTML Fragment ตะกร้า + hx-delete="/cart/1"
    Note over Browser: อัปเดตตะกร้าสินค้า
(Update shopping cart)

รูปที่ 1.3: การทำงานของ HATEOAS ใน HTMX Application

1.4 REST และ Hypermedia — เว็บแบบดั้งเดิมที่ HTMX นำกลับมาใช้ใหม่

1.4.1 REST ที่แท้จริง vs REST ที่เราใช้กัน

Roy Fielding ผู้บัญญัติ REST ในวิทยานิพนธ์ปี 2000 ระบุว่า REST ต้องมี HATEOAS แต่ในทางปฏิบัติ "REST API" ส่วนใหญ่ที่เราเห็นในปัจจุบันเป็นเพียง HTTP API ที่ไม่ได้เป็น REST ที่แท้จริง

1.4.2 ทำไม HTML ถึงเป็น Hypermedia ที่ดีที่สุด

HTML มีคุณสมบัติ Hypermedia โดยธรรมชาติ:

• <a href="..."> — ลิงก์ไปยังทรัพยากรอื่น
• <form action="..."> — การกระทำต่อทรัพยากร
• <img src="..."> — การฝัง Hypermedia
• HTTP Verbs ผ่าน method attribute

HTMX ขยายความสามารถนี้ให้กับ ทุก Element ใน HTML

1.5 HTMX เทียบกับ SPA Frameworks — React, Vue, Angular ต่างกันอย่างไร

1.5.1 ตารางเปรียบเทียบแบบละเอียด

1.5.2 สถาปัตยกรรมที่แตกต่างกัน

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#3c3836',
    'primaryTextColor': '#ebdbb2',
    'primaryBorderColor': '#a89984',
    'lineColor': '#d79921',
    'background': '#282828',
    'mainBkg': '#3c3836',
    'clusterBkg': '#32302f',
    'fontSize': '14px'
  }
}}%%
flowchart TB
    subgraph spa["SPA Architecture (React/Vue)"]
        direction TB
        S1["Server - (API Server)"] -->|JSON Data| C1["Client - (JavaScript Bundle)"]
        C1 -->|Virtual DOM| R1["Browser - (DOM Update)"]
        C1 -->|Manages| ST1["Client State - (Redux/Pinia)"]
    end
    subgraph htmx["HTMX Architecture"]
        direction TB
        S2["Server - (Template Engine)"] -->|HTML Fragment| C2["HTMX - (14KB Library)"]
        C2 -->|Direct DOM Update| R2["Browser - (Real DOM)"]
        S2 -->|Manages| ST2["Server State - (Session/DB)"]
    end
    style S1 fill:#458588,color:#ebdbb2,stroke:#83a598
    style C1 fill:#cc241d,color:#ebdbb2,stroke:#fb4934
    style R1 fill:#689d6a,color:#ebdbb2,stroke:#8ec07c
    style ST1 fill:#d79921,color:#282828,stroke:#fabd2f
    style S2 fill:#458588,color:#ebdbb2,stroke:#83a598
    style C2 fill:#b16286,color:#ebdbb2,stroke:#d3869b
    style R2 fill:#689d6a,color:#ebdbb2,stroke:#8ec07c
    style ST2 fill:#98971a,color:#282828,stroke:#b8bb26

รูปที่ 1.4: เปรียบเทียบสถาปัตยกรรม SPA vs HTMX

ส่วนที่ 2: การติดตั้งและเริ่มต้นใช้งาน

2.1 การติดตั้ง HTMX — CDN, npm, และการรวมกับ Build Tools

2.1.1 วิธีที่ 1: CDN (วิธีที่ง่ายที่สุด)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMX Demo</title>
  <!-- ติดตั้งผ่าน CDN - ใช้ได้ทันที -->
  <script src="https://unpkg.com/htmx.org@2.0.4" 
          integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" 
          crossorigin="anonymous"></script>
</head>
<body>
  <h1>สวัสดี HTMX!</h1>
  <button hx-get="/hello" hx-target="#result">
    กดเพื่อโหลด
  </button>
  <div id="result"></div>
</body>
</html>

2.1.2 วิธีที่ 2: npm/yarn

# ติดตั้งผ่าน npm
npm install htmx.org

# ติดตั้งผ่าน yarn
yarn add htmx.org

# ติดตั้งผ่าน bun
bun add htmx.org

# ติดตั้งผ่าน pnpm
pnpm add htmx.org

// นำเข้าใน JavaScript/TypeScript โปรเจกต์
import htmx from 'htmx.org';

// หรือแบบ CommonJS
const htmx = require('htmx.org');

// ใน Vite/Webpack (import เพื่อให้ global htmx object พร้อมใช้)
import 'htmx.org';

2.1.3 วิธีที่ 3: ดาวน์โหลดและ Self-host

# ดาวน์โหลดไฟล์
curl -o htmx.min.js https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js

# วางในโปรเจกต์
cp htmx.min.js ./static/js/

<!-- ใช้ Local File -->
<script src="/static/js/htmx.min.js"></script>

2.2 โครงสร้างโปรเจกต์พื้นฐาน — การจัดไฟล์และ Server ที่ใช้คู่กัน

2.2.1 โครงสร้างไฟล์แนะนำ

my-htmx-app/
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── htmx.min.js
├── templates/
│   ├── base.html          ← Layout หลัก
│   ├── partials/          ← HTML Fragments สำหรับ HTMX
│   │   ├── user-list.html
│   │   ├── product-card.html
│   │   └── notification.html
│   └── pages/             ← หน้าเต็ม
│       ├── index.html
│       └── about.html
├── app.py                 ← FastAPI/Flask Server
└── requirements.txt

2.2.2 Base Template พื้นฐาน

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}My HTMX App{% endblock %}</title>
  
  <!-- CSS -->
  <link rel="stylesheet" href="/static/css/style.css">
  
  <!-- HTMX - โหลดก่อน body content -->
  <script src="/static/js/htmx.min.js"></script>
  
  <!-- Meta tag สำหรับ CSRF Protection -->
  <meta name="csrf-token" content="{{ csrf_token }}">
  
  <!-- กำหนด Default Configuration -->
  <meta name="htmx-config" content='{"defaultSwapStyle":"innerHTML", "timeout":5000}'>
</head>
<body>
  <!-- Navigation -->
  <nav>
    <a href="/" hx-boost="true">หน้าหลัก</a>
    <a href="/products" hx-boost="true">สินค้า</a>
    <a href="/about" hx-boost="true">เกี่ยวกับ</a>
  </nav>
  
  <!-- Main Content -->
  <main id="main-content">
    {% block content %}{% endblock %}
  </main>
  
  <!-- Notification Area -->
  <div id="notifications" class="notification-container"></div>
  
  {% block scripts %}{% endblock %}
</body>
</html>

2.3 Hello HTMX — ตัวอย่างแรกแบบ Step-by-Step

2.3.1 Server-side: FastAPI (Python)

# app.py - FastAPI Server สำหรับ Demo HTMX
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
import random

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")

# ข้อมูลตัวอย่าง (Sample Data)
sample_users = [
    {"id": 1, "name": "สมชาย ใจดี", "email": "somchai@example.com", "active": True},
    {"id": 2, "name": "สมหญิง รักเรียน", "email": "somying@example.com", "active": True},
    {"id": 3, "name": "วิชัย แข็งแกร่ง", "email": "wichai@example.com", "active": False},
]

# หน้าหลัก (Main Page)
@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse("pages/index.html", {"request": request})

# Endpoint แรก: ทักทายแบบง่าย (Simple Greeting)
@app.get("/hello", response_class=HTMLResponse)
async def hello():
    names = ["สมชาย", "สมหญิง", "วิชัย", "มานี", "ปิติ"]
    name = random.choice(names)
    return f"<p>สวัสดี, <strong>{name}</strong>! ยินดีต้อนรับสู่ HTMX 🎉</p>"

# Endpoint: รายการผู้ใช้ (User List)
@app.get("/users", response_class=HTMLResponse)
async def get_users(request: Request):
    return templates.TemplateResponse(
        "partials/user-list.html", 
        {"request": request, "users": sample_users}
    )

# Endpoint: เพิ่มผู้ใช้ (Add User)
@app.post("/users", response_class=HTMLResponse)
async def add_user(request: Request):
    form_data = await request.form()
    new_user = {
        "id": len(sample_users) + 1,
        "name": form_data.get("name"),
        "email": form_data.get("email"),
        "active": True
    }
    sample_users.append(new_user)
    # ส่งกลับเฉพาะ row ใหม่ (Return only the new row)
    return f"""
    <tr>
      <td>{new_user['id']}</td>
      <td>{new_user['name']}</td>
      <td>{new_user['email']}</td>
      <td><span class="badge active">Active</span></td>
    </tr>
    """

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

2.3.2 Client-side: HTML ตัวอย่าง

<!-- templates/pages/index.html -->
{% extends "base.html" %}

{% block title %}Hello HTMX - Demo{% endblock %}

{% block content %}
<div class="container">
  <h1>ยินดีต้อนรับสู่ HTMX Demo</h1>
  
  <!-- ตัวอย่างที่ 1: Simple Click -->
  <section class="demo-section">
    <h2>ตัวอย่างที่ 1: การคลิกปุ่มง่าย ๆ</h2>
    
    <!-- 
      hx-get="/hello" → ส่ง GET Request ไปที่ /hello
      hx-target="#greeting" → ใส่ Response ใน #greeting
      hx-swap="innerHTML" → แทนที่เนื้อหาใน element
    -->
    <button 
      hx-get="/hello" 
      hx-target="#greeting"
      hx-swap="innerHTML"
      class="btn-primary">
      👋 ทักทาย!
    </button>
    
    <div id="greeting" class="result-box">
      (กดปุ่มเพื่อทักทาย)
    </div>
  </section>
  
  <!-- ตัวอย่างที่ 2: โหลดรายการ -->
  <section class="demo-section">
    <h2>ตัวอย่างที่ 2: โหลดรายการผู้ใช้</h2>
    
    <button 
      hx-get="/users"
      hx-target="#user-table"
      hx-swap="innerHTML"
      hx-indicator="#loading-spinner">
      📋 โหลดรายการผู้ใช้
    </button>
    
    <!-- Loading Indicator -->
    <span id="loading-spinner" class="htmx-indicator">
      ⏳ กำลังโหลด...
    </span>
    
    <div id="user-table">
      (รายการจะปรากฏที่นี่)
    </div>
  </section>
</div>
{% endblock %}

ส่วนที่ 3: Core Attributes หลัก

3.1 hx-get, hx-post, hx-put, hx-patch, hx-delete — การส่ง HTTP Request

3.1.1 HTTP Methods ทั้ง 5 แบบ

HTMX รองรับ HTTP Methods ครบทุกตัว ทำให้สามารถทำ CRUD Operations ได้อย่างสมบูรณ์:

<!-- GET: ดึงข้อมูล (Read) -->
<button hx-get="/products">ดูสินค้าทั้งหมด</button>

<!-- POST: สร้างข้อมูลใหม่ (Create) -->
<form hx-post="/products">
  <input name="name" placeholder="ชื่อสินค้า">
  <button type="submit">เพิ่มสินค้า</button>
</form>

<!-- PUT: อัปเดตข้อมูลทั้งหมด (Update/Replace) -->
<form hx-put="/products/1">
  <input name="name" value="สินค้าอัปเดต">
  <button type="submit">บันทึก</button>
</form>

<!-- PATCH: อัปเดตข้อมูลบางส่วน (Partial Update) -->
<button hx-patch="/products/1/toggle-active">
  เปิด/ปิด สถานะ
</button>

<!-- DELETE: ลบข้อมูล (Delete) -->
<button hx-delete="/products/1"
        hx-confirm="คุณต้องการลบสินค้านี้ใช่ไหม?">
  🗑️ ลบสินค้า
</button>

3.1.2 ตัวอย่างจริง: CRUD สำหรับ Task Manager

# tasks_api.py - API สำหรับ Task Manager
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse

app = FastAPI()

tasks = [
    {"id": 1, "title": "เรียน HTMX", "done": False},
    {"id": 2, "title": "สร้างโปรเจกต์แรก", "done": False},
    {"id": 3, "title": "Deploy ขึ้น Production", "done": False},
]
next_id = 4

def render_task(task: dict) -> str:
    """Render HTML ของ task เดียว"""
    done_class = "task-done" if task["done"] else ""
    check_icon = "✅" if task["done"] else "⬜"
    return f"""
    <li id="task-{task['id']}" class="task-item {done_class}">
      <button hx-patch="/tasks/{task['id']}/toggle"
              hx-target="#task-{task['id']}"
              hx-swap="outerHTML">
        {check_icon}
      </button>
      <span class="task-title">{task['title']}</span>
      <button hx-delete="/tasks/{task['id']}"
              hx-target="#task-{task['id']}"
              hx-swap="outerHTML"
              hx-confirm="ลบงานนี้?">
        🗑️
      </button>
    </li>
    """

# GET: ดึงรายการทั้งหมด
@app.get("/tasks", response_class=HTMLResponse)
async def get_tasks():
    items = "".join(render_task(t) for t in tasks)
    return f'<ul id="task-list" class="tasks">{items}</ul>'

# POST: เพิ่ม task ใหม่
@app.post("/tasks", response_class=HTMLResponse)
async def create_task(request: Request):
    global next_id
    form = await request.form()
    task = {"id": next_id, "title": form.get("title"), "done": False}
    tasks.append(task)
    next_id += 1
    return render_task(task)

# PATCH: สลับสถานะ done/undone
@app.patch("/tasks/{task_id}/toggle", response_class=HTMLResponse)
async def toggle_task(task_id: int):
    for task in tasks:
        if task["id"] == task_id:
            task["done"] = not task["done"]
            return render_task(task)
    return "", 404

# DELETE: ลบ task
@app.delete("/tasks/{task_id}", response_class=HTMLResponse)
async def delete_task(task_id: int):
    global tasks
    tasks = [t for t in tasks if t["id"] != task_id]
    return ""  # ส่ง empty string เพื่อลบ element ออกจาก DOM

3.2 hx-target — การกำหนดเป้าหมายการอัปเดต DOM

3.2.1 Selector ทุกรูปแบบ

hx-target ใช้ CSS Selector ในการระบุ Element ที่จะรับ Response:

<!-- Target by ID (ที่นิยมใช้มากที่สุด) -->
<button hx-get="/data" hx-target="#result">โหลด</button>
<div id="result"></div>

<!-- Target: this (Element ตัวเอง) -->
<div hx-get="/updated-content" hx-target="this" hx-trigger="click">
  คลิกเพื่ออัปเดต
</div>

<!-- Target: closest (หา ancestor ที่ใกล้ที่สุด) -->
<tr>
  <td>ข้อมูล</td>
  <td>
    <button hx-delete="/items/1" hx-target="closest tr" hx-swap="outerHTML">
      ลบ
    </button>
  </td>
</tr>

<!-- Target: find (หา descendant) -->
<div id="container">
  <button hx-get="/content" hx-target="find .content-area">โหลด</button>
  <div class="content-area">เนื้อหาจะปรากฏที่นี่</div>
</div>

<!-- Target: next (sibling ถัดไป) -->
<button hx-get="/help-text" hx-target="next .help">❓ ช่วยเหลือ</button>
<div class="help"></div>

<!-- Target: previous (sibling ก่อนหน้า) -->
<div class="preview"></div>
<textarea hx-post="/preview" hx-target="previous .preview" 
          hx-trigger="keyup delay:500ms">
</textarea>

<!-- Target: body (ทั้งหน้า) -->
<button hx-get="/full-page" hx-target="body">โหลดหน้าใหม่</button>

3.3 hx-swap — วิธีการแทนที่เนื้อหา

3.3.1 Swap Strategies ทั้งหมด

<!-- Demo: Swap Strategies ต่าง ๆ -->

<!-- 1. innerHTML: แทนที่เนื้อหาใน div -->
<div id="box">เนื้อหาเดิม</div>
<button hx-get="/new-content" 
        hx-target="#box" 
        hx-swap="innerHTML">
  แทนที่เนื้อหา
</button>

<!-- 2. outerHTML: แทนที่ทั้ง element -->
<div id="card" class="card">
  <button hx-get="/updated-card" 
          hx-target="#card" 
          hx-swap="outerHTML">
    รีเฟรชการ์ด
  </button>
</div>

<!-- 3. beforeend: ต่อท้าย List (นิยมใช้กับ Infinite Scroll) -->
<ul id="messages">
  <li>ข้อความที่ 1</li>
</ul>
<button hx-get="/more-messages" 
        hx-target="#messages" 
        hx-swap="beforeend">
  โหลดเพิ่ม ↓
</button>

<!-- 4. afterbegin: ใส่ตอนต้น (สำหรับ Notification Feed) -->
<ul id="notifications">
  <!-- การแจ้งเตือนใหม่จะถูกใส่ที่นี่ -->
</ul>
<button hx-get="/latest-notification" 
        hx-target="#notifications" 
        hx-swap="afterbegin">
  ตรวจสอบการแจ้งเตือน
</button>

<!-- 5. Swap with Transition (เพิ่ม Animation) -->
<div id="content" class="fade-in">
  เนื้อหาปัจจุบัน
</div>
<button hx-get="/new" 
        hx-target="#content" 
        hx-swap="innerHTML transition:true">
  สลับพร้อม Animation
</button>

<!-- 6. Swap with Delay (ชะลอก่อน Swap) -->
<button hx-delete="/item/1"
        hx-target="#item-1"
        hx-swap="outerHTML swap:500ms">
  ลบ (พร้อม Animation)
</button>

3.4 hx-trigger — การกำหนด Event ที่จะเรียก Request

3.4.1 Event Triggers ทั้งหมด

<!-- Default Triggers (ตาม Element Type) -->
<!-- button, input[type=submit]: click -->
<!-- input, textarea, select: change -->
<!-- form: submit -->

<!-- Custom Event Triggers -->

<!-- 1. Click (กดปุ่ม) -->
<button hx-get="/data" hx-trigger="click">โหลด</button>

<!-- 2. Change (เมื่อค่าเปลี่ยน) -->
<select hx-get="/filter" hx-trigger="change" hx-target="#results">
  <option value="all">ทั้งหมด</option>
  <option value="active">Active</option>
  <option value="inactive">Inactive</option>
</select>

<!-- 3. Keyup with Delay (พิมพ์แล้วหน่วง 500ms) -->
<input type="text" 
       name="search"
       hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#search-results"
       placeholder="ค้นหา...">

<!-- 4. Load (เมื่อ Element โหลด) -->
<div hx-get="/lazy-content" hx-trigger="load">
  ⏳ กำลังโหลด...
</div>

<!-- 5. Revealed (เมื่อปรากฏใน Viewport - สำหรับ Lazy Load) -->
<div hx-get="/more-data" hx-trigger="revealed">
  โหลดเพิ่มเมื่อเลื่อนลงมา
</div>

<!-- 6. Every N Seconds (Polling) -->
<div hx-get="/live-stats" 
     hx-trigger="every 5s"
     hx-swap="innerHTML">
  กำลังโหลดสถิติ...
</div>

<!-- 7. Custom Event -->
<div hx-get="/refresh" hx-trigger="myCustomEvent">
  รอ Custom Event
</div>
<!-- เรียก Custom Event จาก JavaScript -->
<script>
  htmx.trigger('#my-div', 'myCustomEvent');
</script>

<!-- 8. Intersection Observer (เมื่อมองเห็น) -->
<div hx-get="/analytics" 
     hx-trigger="intersect once"
     hx-swap="none">
  (ติดตาม Analytics เมื่อมองเห็น)
</div>

<!-- 9. Multiple Triggers -->
<input hx-get="/validate"
       hx-trigger="focus, change, keyup delay:300ms changed"
       hx-target="next .error-msg">
<span class="error-msg"></span>

3.5 hx-boost — การเพิ่มประสิทธิภาพลิงก์และฟอร์มแบบอัตโนมัติ

3.5.1 วิธีการทำงานของ hx-boost

hx-boost แปลง <a> และ <form> ทั่วไปให้กลายเป็น AJAX Request โดยอัตโนมัติ โดยที่ไม่ต้องเขียน hx-get หรือ hx-post เพิ่ม ผลลัพธ์คือ User ได้รับประสบการณ์ที่ เร็วขึ้น เนื่องจากหน้าเว็บไม่ต้อง Full Reload

<!-- hx-boost บน body หรือ nav (ครอบคลุมทุก link/form ใน element) -->
<nav hx-boost="true">
  <a href="/">หน้าหลัก</a>           <!-- จะเป็น AJAX GET -->
  <a href="/products">สินค้า</a>      <!-- จะเป็น AJAX GET -->
  <a href="/about">เกี่ยวกับ</a>      <!-- จะเป็น AJAX GET -->
</nav>

<!-- ปิด boost สำหรับ link บางอัน -->
<a href="/download/file.pdf" hx-boost="false">ดาวน์โหลด PDF</a>

<!-- hx-boost บน form -->
<form action="/search" method="get" hx-boost="true">
  <input name="q" placeholder="ค้นหา...">
  <button type="submit">ค้นหา</button>
</form>

3.6 hx-push-url — การจัดการ Browser History และ URL

3.6.1 การทำงานกับ History API

<!-- อัปเดต URL เมื่อโหลดข้อมูล (เหมือน SPA Navigation) -->
<a href="/products/1" 
   hx-get="/products/1/content"
   hx-target="#main"
   hx-push-url="true">
  สินค้าชิ้นที่ 1
</a>

<!-- กำหนด URL ที่ต้องการ (ต่างจาก hx-get path) -->
<button hx-get="/products?category=electronics"
        hx-target="#products-list"
        hx-push-url="/products?category=electronics">
  อิเล็กทรอนิกส์
</button>

<!-- ไม่ push URL (default สำหรับ hx-get ปกติ) -->
<button hx-get="/modal-content"
        hx-target="#modal"
        hx-push-url="false">
  เปิด Modal
</button>

<!-- hx-replace-url: แทนที่ URL ใน History แทนที่จะ Push -->
<button hx-get="/search?q=htmx"
        hx-replace-url="/search?q=htmx">
  ค้นหา
</button>

ส่วนที่ 4: การส่งและรับข้อมูล

4.1 hx-include และ hx-params — การควบคุมข้อมูลที่ส่งไป Server

4.1.1 hx-include: รวม Input จากที่อื่น

<!-- รวม input จาก element อื่นที่ไม่ได้อยู่ใน form เดียวกัน -->
<div>
  <input id="user-id" type="hidden" name="user_id" value="42">
  <input id="filter-date" type="date" name="date" value="2024-01-15">
</div>

<!-- ปุ่มนี้จะรวมค่าจาก #user-id และ #filter-date ด้วย -->
<button hx-get="/report"
        hx-include="#user-id, #filter-date"
        hx-target="#report-area">
  📊 ดูรายงาน
</button>

<!-- รวมทุก input ใน Form (ใช้ CSS Selector) -->
<button hx-post="/submit-all"
        hx-include="closest form">
  ส่งฟอร์มทั้งหมด
</button>

<!-- hx-params: กรองพารามิเตอร์ที่ส่งไป -->
<form hx-post="/update-profile">
  <input name="username" value="john">
  <input name="email" value="john@example.com">
  <input name="password" value="secret">
  
  <!-- ส่งเฉพาะ username และ email (ไม่ส่ง password) -->
  <button hx-post="/update-profile"
          hx-params="username, email">
    อัปเดตโปรไฟล์
  </button>
  
  <!-- ส่งทุกอย่างยกเว้น password -->
  <button hx-post="/update-profile"
          hx-params="not password">
    อัปเดต (ไม่เปลี่ยนรหัสผ่าน)
  </button>
</form>

4.2 hx-vals — การเพิ่มค่าพิเศษลงใน Request

4.2.1 การใช้ hx-vals

<!-- hx-vals: เพิ่มค่าพิเศษ (JSON format) -->
<button hx-post="/purchase"
        hx-vals='{"product_id": 42, "quantity": 1, "currency": "THB"}'>
  🛒 เพิ่มลงตะกร้า
</button>

<!-- hx-vals แบบ Dynamic (ใช้ JavaScript) -->
<button hx-post="/add-to-cart"
        hx-vals='js:{product_id: getSelectedProductId(), timestamp: Date.now()}'>
  เพิ่มลงตะกร้า
</button>

<!-- ตัวอย่างจริง: ส่ง Context พิเศษ -->
<div class="product-card" data-category="electronics">
  <h3>โทรศัพท์มือถือ</h3>
  <button hx-post="/analytics/view"
          hx-vals='js:{
            category: this.closest(".product-card").dataset.category,
            page: window.location.pathname,
            userId: document.querySelector("meta[name=user-id]")?.content
          }'
          hx-swap="none">
    ดูรายละเอียด
  </button>
</div>

4.3 hx-headers — การกำหนด Custom HTTP Headers

4.3.1 Custom Headers และ CSRF

<!-- กำหนด Custom Header สำหรับทุก Request ใน section นี้ -->
<div hx-headers='{"X-Custom-Header": "my-value", "X-App-Version": "2.0"}'>
  <button hx-get="/api/data">โหลดข้อมูล</button>
  <button hx-post="/api/submit">ส่งข้อมูล</button>
</div>

<!-- CSRF Token ผ่าน Header -->
<body hx-headers='js:{"X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content}'>
  <!-- ทุก HTMX Request ใน body จะส่ง CSRF Token -->
  <form hx-post="/update">
    <input name="data" value="ข้อมูล">
    <button type="submit">บันทึก</button>
  </form>
</body>

<!-- Authorization Header สำหรับ API -->
<div hx-headers='js:{"Authorization": "Bearer " + localStorage.getItem("token")}'>
  <button hx-get="/api/protected">เข้าถึง API ที่ต้องการ Auth</button>
</div>

4.4 การจัดการ Response จาก Server — HTML Partial vs JSON

4.4.1 HTML Partial (แนะนำสำหรับ HTMX)

# server_responses.py - ตัวอย่าง Response ประเภทต่าง ๆ
from fastapi import FastAPI, Request, Response
from fastapi.responses import HTMLResponse

app = FastAPI()

# ✅ HTML Partial Response (แนะนำ)
@app.get("/products/{product_id}", response_class=HTMLResponse)
async def get_product_html(product_id: int):
    # ส่ง HTML Fragment กลับไปโดยตรง
    return f"""
    <div class="product-card" id="product-{product_id}">
      <h3>สินค้า #{product_id}</h3>
      <p class="price">฿1,299</p>
      <button hx-post="/cart/add"
              hx-vals='{{"product_id": {product_id}}}'
              hx-target="#cart-count"
              hx-swap="innerHTML">
        เพิ่มลงตะกร้า
      </button>
    </div>
    """

# ⚠️ JSON Response (ต้องใช้ JS เพิ่มเติม - ไม่แนะนำสำหรับ HTMX)
@app.get("/products/{product_id}/json")
async def get_product_json(product_id: int):
    return {"id": product_id, "name": "สินค้า", "price": 1299}

# HTTP Status Codes ที่ HTMX จัดการ
@app.post("/form-submit", response_class=HTMLResponse)
async def handle_form(request: Request):
    form = await request.form()
    
    if not form.get("name"):
        # 422: ข้อมูลไม่ถูกต้อง (HTMX จะยัง Swap ปกติ)
        response = HTMLResponse(
            content='<p class="error">❌ กรุณากรอกชื่อ</p>',
            status_code=422
        )
        return response
    
    # 200: สำเร็จ
    return f'<p class="success">✅ บันทึก "{form.get("name")}" สำเร็จ!</p>'

4.4.2 ตาราง HTTP Status Code กับ HTMX

4.5 HX-Trigger Response Header — การส่ง Event กลับจาก Server

4.5.1 การใช้ HX-Trigger Header

# hx_trigger_examples.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
import json

app = FastAPI()

# ส่ง Event เดียว
@app.post("/save", response_class=HTMLResponse)
async def save_data(request: Request):
    form = await request.form()
    # บันทึกข้อมูล...
    
    response = HTMLResponse(content='<p>✅ บันทึกสำเร็จ!</p>')
    # บอกให้ HTMX fire event "dataSaved" บน Client
    response.headers["HX-Trigger"] = "dataSaved"
    return response

# ส่งหลาย Events พร้อมข้อมูล
@app.delete("/products/{product_id}", response_class=HTMLResponse)
async def delete_product(product_id: int):
    # ลบสินค้า...
    
    response = HTMLResponse(content="")  # ลบ element ออก
    response.headers["HX-Trigger"] = json.dumps({
        "productDeleted": {"id": product_id},
        "showNotification": {
            "message": f"ลบสินค้า #{product_id} สำเร็จ",
            "type": "success"
        }
    })
    return response

# HX-Trigger-After-Settle (fire หลัง DOM settle)
@app.post("/create-order")
async def create_order(request: Request):
    response = HTMLResponse(content='<p>สร้างคำสั่งซื้อแล้ว</p>')
    response.headers["HX-Trigger-After-Settle"] = "orderCreated"
    # HX-Trigger-After-Swap: fire หลัง Swap เสร็จ
    response.headers["HX-Trigger-After-Swap"] = "pageUpdated"
    return response

<!-- Client: รับฟัง Events จาก Server -->
<div id="notification-area"></div>

<!-- Component ที่รับฟัง dataSaved event -->
<div hx-on:dataSaved="this.classList.add('saved')">
  เนื้อหา
</div>

<!-- ใช้ JavaScript สำหรับ Event ซับซ้อน -->
<script>
  // รับฟัง showNotification event
  document.body.addEventListener("showNotification", function(evt) {
    const { message, type } = evt.detail;
    const area = document.getElementById("notification-area");
    area.innerHTML = `<div class="alert alert-${type}">${message}</div>`;
    
    // ซ่อนหลัง 3 วินาที
    setTimeout(() => area.innerHTML = "", 3000);
  });
  
  // รับฟัง productDeleted event
  document.body.addEventListener("productDeleted", function(evt) {
    console.log("ลบสินค้า ID:", evt.detail.id);
    // อัปเดต Cart count หรืออื่น ๆ
  });
</script>

ส่วนที่ 5: การจัดการ UI และ UX

5.1 Loading States และ htmx-indicator — การแสดงสถานะโหลด

5.1.1 การใช้ htmx-indicator

<!-- style.css ที่จำเป็น -->
<style>
  /* htmx-indicator ซ่อนอยู่โดย default */
  .htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
  }
  /* เมื่อ Request กำลังทำงาน: แสดง indicator */
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    opacity: 1;
  }
  /* Spinner Animation */
  .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0,0,0,.1);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>

<!-- ตัวอย่าง 1: Spinner บน Button -->
<button hx-get="/slow-data"
        hx-target="#output"
        hx-indicator="#btn-spinner">
  โหลดข้อมูล
  <span id="btn-spinner" class="htmx-indicator spinner"></span>
</button>

<!-- ตัวอย่าง 2: Loading Overlay บน Section -->
<div id="data-section" style="position: relative;">
  <!-- Overlay ปรากฏระหว่างโหลด -->
  <div class="htmx-indicator" style="
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: center;
  ">
    <span class="spinner"></span> กำลังโหลด...
  </div>
  
  <div id="data-content">เนื้อหา</div>
</div>

<button hx-get="/refresh"
        hx-target="#data-content"
        hx-indicator="#data-section">
  รีเฟรช
</button>

<!-- ตัวอย่าง 3: Global Loading Bar (Progress Bar ด้านบน) -->
<div id="global-loading" class="htmx-indicator" style="
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: #3498db;
  animation: loading-bar 1s ease-in-out infinite;
">
</div>

5.2 hx-confirm — การยืนยันก่อนดำเนินการ

5.2.1 hx-confirm พื้นฐาน

<!-- Confirm Dialog ปกติ (Browser native) -->
<button hx-delete="/products/1"
        hx-target="#product-1"
        hx-swap="outerHTML"
        hx-confirm="คุณต้องการลบสินค้านี้ใช่ไหม? การดำเนินการนี้ไม่สามารถย้อนกลับได้">
  🗑️ ลบสินค้า
</button>

<!-- Custom Confirm ด้วย JavaScript -->
<script>
  // Override confirm dialog ด้วย Custom Modal
  document.body.addEventListener('htmx:confirm', function(evt) {
    evt.preventDefault(); // หยุด default confirm
    
    const question = evt.detail.question;
    
    // แสดง Custom Modal
    showCustomConfirm(question, function(confirmed) {
      if (confirmed) {
        evt.detail.issueRequest(true); // ดำเนินการต่อ
      }
    });
  });
  
  function showCustomConfirm(message, callback) {
    // ใช้ SweetAlert2 หรือ Modal Library อื่น ๆ
    if (window.Swal) {
      Swal.fire({
        title: 'ยืนยันการดำเนินการ',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'ยืนยัน',
        cancelButtonText: 'ยกเลิก',
        confirmButtonColor: '#d33',
      }).then(result => callback(result.isConfirmed));
    }
  }
</script>

5.3 hx-disable — การป้องกัน Double Submit

5.3.1 ป้องกัน Double Submit

<!-- hx-disable: ปิด HTMX บน element -->
<button hx-post="/submit"
        hx-disable>
  ปุ่มนี้ถูกปิด HTMX
</button>

<!-- ป้องกัน Double Submit ด้วย hx-disabled-elt -->
<form hx-post="/checkout"
      hx-disabled-elt="find button[type=submit]">
  <input name="address" placeholder="ที่อยู่จัดส่ง">
  <button type="submit">
    ชำระเงิน
    <span class="htmx-indicator">⏳</span>
  </button>
</form>

<!-- ปิด Form ทั้งหมดระหว่างส่ง -->
<form hx-post="/important-action"
      hx-disabled-elt="this">
  <input name="data">
  <button>ส่ง</button>
</form>

5.4 CSS Transitions และ Animation — การทำ Smooth UI ด้วย HTMX

5.4.1 CSS-based Animations

/* htmx-animation.css */

/* Fade In เมื่อ Element ใหม่ปรากฏ */
.htmx-added {
  opacity: 0;
}
.htmx-added:not(.htmx-settling) {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Fade Out เมื่อ Element เก่าหายไป */
.htmx-swapping {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
.htmx-swapping {
  opacity: 0;
}

/* Slide In from Top */
@keyframes slideInFromTop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideInFromTop 0.3s ease-out;
}

/* View Transitions API (Modern Browsers) */
@view-transition {
  navigation: auto;
}

<!-- ใช้ Class-based Animation กับ HTMX -->
<ul id="item-list">
  <li class="slide-in">รายการที่ 1</li>
</ul>

<button hx-post="/items"
        hx-target="#item-list"
        hx-swap="beforeend">
  เพิ่มรายการ
</button>

<!-- Server ส่งกลับ HTML พร้อม class animation -->
<!-- <li class="slide-in">รายการใหม่</li> -->

5.5 hx-select — การเลือกเฉพาะส่วนจาก Response

5.5.1 hx-select เพื่อเลือก Fragment

<!-- Server ส่ง Full Page กลับ แต่เราต้องการเฉพาะ #content -->
<button hx-get="/full-page"
        hx-select="#content"
        hx-target="#main">
  โหลดเฉพาะเนื้อหาหลัก
</button>

<!-- hx-select-oob: ดึงหลาย Element พร้อมกัน -->
<button hx-get="/page-with-sidebar"
        hx-select="#main-content"
        hx-target="#content-area"
        hx-select-oob="#sidebar:innerHTML,#breadcrumb:innerHTML">
  โหลดหน้าพร้อม Sidebar
</button>

ส่วนที่ 6: เทคนิคขั้นสูง

6.1 Out-of-Band Swaps (hx-swap-oob) — การอัปเดตหลาย Element พร้อมกัน

6.1.1 การใช้ hx-swap-oob

hx-swap-oob (Out-of-Band) ช่วยให้ Server สามารถอัปเดต หลาย Element ในหน้าเว็บพร้อมกันใน Response เดียว โดยที่ Response หลักอัปเดต Target ปกติ ส่วน OOB Elements จะถูกอัปเดตตาม ID ของตัวเอง

# oob_example.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse

app = FastAPI()

cart_count = 0

@app.post("/cart/add", response_class=HTMLResponse)
async def add_to_cart(request: Request):
    global cart_count
    form = await request.form()
    product_id = form.get("product_id")
    cart_count += 1
    
    # Main Response: ยืนยันการเพิ่มสินค้า
    # OOB Response: อัปเดต Cart Badge และ Notification พร้อมกัน
    return f"""
    <div class="add-confirmation">
      ✅ เพิ่มสินค้า #{product_id} ลงตะกร้าแล้ว
    </div>
    
    <!-- OOB: อัปเดต Cart Count ที่ Navbar -->
    <span id="cart-count" hx-swap-oob="innerHTML">
      {cart_count}
    </span>
    
    <!-- OOB: แสดง Notification -->
    <div id="notification" hx-swap-oob="innerHTML">
      <div class="toast success">
        🛒 เพิ่มลงตะกร้าสำเร็จ! (รวม {cart_count} ชิ้น)
      </div>
    </div>
    """

<!-- index.html -->
<nav>
  <a href="/cart">
    🛒 ตะกร้า
    <span id="cart-count" class="badge">0</span>
  </a>
</nav>

<div id="notification"></div>

<div class="products">
  <div class="product-card">
    <h3>สินค้า A</h3>
    <form hx-post="/cart/add" hx-target="#add-feedback">
      <input type="hidden" name="product_id" value="101">
      <button type="submit">🛒 เพิ่มลงตะกร้า</button>
    </form>
  </div>
  <div id="add-feedback"></div>
</div>

6.2 Polling ด้วย hx-trigger="every Ns" — การดึงข้อมูลอัตโนมัติ

6.2.1 Auto-Polling

<!-- Polling ทุก 5 วินาที -->
<div hx-get="/live-stats"
     hx-trigger="every 5s"
     hx-swap="innerHTML"
     class="stats-panel">
  กำลังโหลดสถิติ...
</div>

<!-- Conditional Polling (หยุดเมื่อ Server บอก) -->
<div id="job-status"
     hx-get="/jobs/123/status"
     hx-trigger="every 2s"
     hx-swap="outerHTML">
  ⏳ กำลังประมวลผล...
</div>
<!-- Server ส่งกลับ: ถ้าเสร็จแล้ว ไม่ใส่ hx-trigger ใน Response -->
<!-- <div id="job-status">✅ ประมวลผลเสร็จแล้ว!</div> -->

<!-- Dashboard ที่ Refresh ข้อมูลหลายส่วนพร้อมกัน -->
<div class="dashboard">
  <div hx-get="/stats/users" hx-trigger="load, every 30s" hx-swap="innerHTML">
    <div class="spinner"></div>
  </div>
  <div hx-get="/stats/sales" hx-trigger="load, every 30s" hx-swap="innerHTML">
    <div class="spinner"></div>
  </div>
  <div hx-get="/stats/inventory" hx-trigger="load, every 60s" hx-swap="innerHTML">
    <div class="spinner"></div>
  </div>
</div>

6.3 Server-Sent Events (SSE) — Real-time Updates แบบ One-way

6.3.1 SSE กับ HTMX

# sse_server.py
import asyncio
import random
from fastapi import FastAPI
from fastapi.responses import StreamingResponse

app = FastAPI()

async def generate_stock_updates():
    """Generator สำหรับ SSE Stream"""
    stocks = {"KBANK": 152.0, "PTT": 35.5, "SCB": 112.0}
    
    while True:
        # สร้างข้อมูลหุ้นสุ่ม
        for ticker, price in stocks.items():
            change = random.uniform(-2, 2)
            stocks[ticker] = round(price + change, 2)
            direction = "up" if change > 0 else "down"
            
            html_content = f"""
            <div id="stock-{ticker}" hx-swap-oob="innerHTML">
              <span class="price {direction}">{stocks[ticker]:.2f}</span>
              <span class="change">{'▲' if change > 0 else '▼'} {abs(change):.2f}</span>
            </div>
            """
            # SSE Format: data: <content> -  - 
            yield f"data: {html_content} -  - "
        
        await asyncio.sleep(2)  # อัปเดตทุก 2 วินาที

@app.get("/stocks/stream")
async def stock_stream():
    return StreamingResponse(
        generate_stock_updates(),
        media_type="text/event-stream",
        headers={
            "Cache-Control": "no-cache",
            "X-Accel-Buffering": "no"
        }
    )

<!-- client: ใช้ HTMX SSE Extension -->
<script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script>

<!-- ติดต่อ SSE Stream -->
<div hx-ext="sse" sse-connect="/stocks/stream">
  <h2>ราคาหุ้น Real-time</h2>
  
  <!-- Placeholder สำหรับแต่ละหุ้น (OOB จะอัปเดต) -->
  <div id="stock-KBANK" class="stock-row">
    <span class="ticker">KBANK</span>
    <span class="price">--</span>
  </div>
  <div id="stock-PTT" class="stock-row">
    <span class="ticker">PTT</span>
    <span class="price">--</span>
  </div>
  <div id="stock-SCB" class="stock-row">
    <span class="ticker">SCB</span>
    <span class="price">--</span>
  </div>
</div>

6.4 WebSockets กับ HTMX — Real-time แบบ Two-way

6.4.1 WebSocket Chat

# websocket_chat.py
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from typing import List
import json

app = FastAPI()

class ConnectionManager:
    def __init__(self):
        self.connections: List[WebSocket] = []
    
    async def connect(self, ws: WebSocket):
        await ws.accept()
        self.connections.append(ws)
    
    def disconnect(self, ws: WebSocket):
        self.connections.remove(ws)
    
    async def broadcast(self, html: str):
        """ส่ง HTML ไปยังทุก Connection"""
        for ws in self.connections:
            try:
                await ws.send_text(html)
            except:
                pass

manager = ConnectionManager()
message_count = 0

@app.websocket("/chat/ws")
async def chat_ws(websocket: WebSocket):
    global message_count
    await manager.connect(websocket)
    
    try:
        while True:
            data = await websocket.receive_text()
            msg_data = json.loads(data)
            message_count += 1
            
            # Broadcast HTML Fragment ไปทุก Client
            html = f"""
            <li id="msg-{message_count}" class="message animate-in">
              <strong>{msg_data['username']}:</strong> {msg_data['message']}
              <small>{msg_data.get('time', 'ตอนนี้')}</small>
            </li>
            """
            await manager.broadcast(html)
    except WebSocketDisconnect:
        manager.disconnect(websocket)

<!-- chat.html -->
<script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>

<div id="chat-container" hx-ext="ws" ws-connect="/chat/ws">
  <!-- ข้อความจะถูกต่อท้ายที่นี่ -->
  <ul id="messages" hx-swap-oob="beforeend:#messages">
  </ul>
  
  <!-- ฟอร์มส่งข้อความ -->
  <form ws-send id="chat-form">
    <input type="hidden" name="username" value="ผู้ใช้">
    <input type="text" name="message" 
           placeholder="พิมพ์ข้อความ..." 
           autocomplete="off">
    <button type="submit">ส่ง</button>
  </form>
</div>

<script>
  // เพิ่ม timestamp และล้าง input หลังส่ง
  document.getElementById('chat-form').addEventListener('htmx:wsAfterSend', function() {
    this.querySelector('input[name=message]').value = '';
  });
</script>

6.5 Infinite Scroll และ Lazy Loading — Pattern ยอดนิยม

6.5.1 Infinite Scroll

# infinite_scroll.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse

app = FastAPI()

# ข้อมูลสินค้าตัวอย่าง 100 ชิ้น
all_products = [{"id": i, "name": f"สินค้า #{i}", "price": i * 100} for i in range(1, 101)]
PAGE_SIZE = 10

@app.get("/products", response_class=HTMLResponse)
async def get_products(page: int = 1):
    start = (page - 1) * PAGE_SIZE
    end = start + PAGE_SIZE
    products = all_products[start:end]
    has_more = end < len(all_products)
    
    items_html = "".join(f"""
    <div class="product-card">
      <h3>{p['name']}</h3>
      <p>฿{p['price']}</p>
    </div>
    """ for p in products)
    
    # ปุ่ม "โหลดเพิ่ม" จะปรากฏเฉพาะเมื่อยังมีข้อมูล
    # ใช้ hx-trigger="revealed" เพื่อ auto-load เมื่อเลื่อนลงมาถึง
    load_more = f"""
    <div id="load-trigger"
         hx-get="/products?page={page + 1}"
         hx-trigger="revealed"
         hx-target="#load-trigger"
         hx-swap="outerHTML"
         class="load-more-trigger">
      ⏳ กำลังโหลด...
    </div>
    """ if has_more else '<p class="end-msg">✅ แสดงสินค้าทั้งหมดแล้ว</p>'
    
    return items_html + load_more

<!-- infinite-scroll.html -->
<div id="products-container">
  <!-- โหลดหน้าแรกทันที -->
  <div hx-get="/products?page=1"
       hx-trigger="load"
       hx-target="this"
       hx-swap="outerHTML">
    ⏳ กำลังโหลดสินค้า...
  </div>
</div>

6.6 hx-on และ JavaScript Event Handling — การผสาน JS เมื่อจำเป็น

6.6.1 hx-on Attribute

<!-- hx-on: จัดการ HTMX Events โดยตรงใน HTML -->

<!-- Log ก่อน Request ส่ง -->
<button hx-get="/data"
        hx-on:htmx:before-request="console.log('กำลังส่ง Request...')">
  โหลด
</button>

<!-- Reset Form หลัง Submit สำเร็จ -->
<form hx-post="/messages"
      hx-target="#messages"
      hx-swap="beforeend"
      hx-on:htmx:after-request="this.reset()">
  <input name="text" placeholder="ข้อความ">
  <button type="submit">ส่ง</button>
</form>

<!-- ดักจับ Error -->
<div hx-get="/might-fail"
     hx-on:htmx:response-error="
       alert('เกิดข้อผิดพลาด: ' + event.detail.xhr.status)
     ">
  ข้อมูล
</div>

<!-- Lifecycle Events ที่สำคัญ -->
<div hx-get="/data"
     hx-on:htmx:before-send="this.classList.add('loading')"
     hx-on:htmx:after-settle="this.classList.remove('loading')"
     hx-on:htmx:swap="console.log('DOM อัปเดตแล้ว')">
  เนื้อหา
</div>

ส่วนที่ 7: การใช้งานร่วมกับ Backend

7.1 HTMX กับ Python (FastAPI / Django / Flask)

7.1.1 FastAPI + Jinja2 (Complete Example)

# fastapi_htmx_complete.py
from fastapi import FastAPI, Request, Depends
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
from typing import Optional
import sqlite3
import contextlib

app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")

# Database Setup (SQLite สำหรับ Demo)
def get_db():
    conn = sqlite3.connect("demo.db")
    conn.row_factory = sqlite3.Row
    try:
        yield conn
    finally:
        conn.close()

def init_db():
    with sqlite3.connect("demo.db") as conn:
        conn.execute("""
            CREATE TABLE IF NOT EXISTS todos (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                title TEXT NOT NULL,
                completed BOOLEAN DEFAULT FALSE,
                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
            )
        """)
        # ใส่ข้อมูลตัวอย่าง
        conn.execute("INSERT OR IGNORE INTO todos (id, title) VALUES (1, 'เรียน HTMX')")
        conn.execute("INSERT OR IGNORE INTO todos (id, title) VALUES (2, 'สร้าง Project')")
        conn.commit()

init_db()

# Middleware: ตรวจสอบว่าเป็น HTMX Request หรือไม่
def is_htmx(request: Request) -> bool:
    return request.headers.get("HX-Request") == "true"

# Main Page
@app.get("/", response_class=HTMLResponse)
async def index(request: Request, db=Depends(get_db)):
    todos = db.execute("SELECT * FROM todos ORDER BY created_at DESC").fetchall()
    return templates.TemplateResponse("todos.html", {
        "request": request,
        "todos": todos
    })

# Get all todos (HTML Fragment)
@app.get("/todos", response_class=HTMLResponse)
async def get_todos(request: Request, db=Depends(get_db)):
    todos = db.execute("SELECT * FROM todos ORDER BY created_at DESC").fetchall()
    return templates.TemplateResponse("partials/todo-list.html", {
        "request": request,
        "todos": todos
    })

# Create todo
@app.post("/todos", response_class=HTMLResponse)
async def create_todo(request: Request, db=Depends(get_db)):
    form = await request.form()
    title = form.get("title", "").strip()
    
    if not title:
        return HTMLResponse('<p class="error">กรุณากรอกชื่องาน</p>', status_code=422)
    
    cursor = db.execute("INSERT INTO todos (title) VALUES (?)", (title,))
    db.commit()
    todo_id = cursor.lastrowid
    todo = db.execute("SELECT * FROM todos WHERE id=?", (todo_id,)).fetchone()
    
    return templates.TemplateResponse("partials/todo-item.html", {
        "request": request, "todo": todo
    })

# Toggle complete
@app.patch("/todos/{todo_id}/toggle", response_class=HTMLResponse)
async def toggle_todo(todo_id: int, request: Request, db=Depends(get_db)):
    db.execute("UPDATE todos SET completed = NOT completed WHERE id=?", (todo_id,))
    db.commit()
    todo = db.execute("SELECT * FROM todos WHERE id=?", (todo_id,)).fetchone()
    return templates.TemplateResponse("partials/todo-item.html", {
        "request": request, "todo": todo
    })

# Delete todo
@app.delete("/todos/{todo_id}", response_class=HTMLResponse)
async def delete_todo(todo_id: int, db=Depends(get_db)):
    db.execute("DELETE FROM todos WHERE id=?", (todo_id,))
    db.commit()
    return HTMLResponse("")  # ลบ Element ออก