Attributes for Triggering Requests:
-
hx-get
,hx-post
,hx-put
,hx-delete
: Define HTTP methods for triggering requests. Example:<button hx-get="/api/data">Get Data</button>
-
hx-trigger
: Specify the event that triggers the request (e.g., click, input, change). Example:<input type="text" hx-trigger="keyup" hx-get="/search" />
-
hx-target
: Define the target element(s) for response content insertion. Example:<button hx-get="/data" hx-target="#result">Load Data</button>
-
hx-swap
: Control how the response replaces the target. Example:<button hx-get="/data" hx-target="#result" hx-swap="outerHTML">Load Data</button>
Request Parameters:
-
hx-params
: Include additional data in the request. Example:<button hx-get="/data" hx-params="param1=value1¶m2=value2">Load Data</button>
-
hx-indicator
: Display a loading indicator during request execution. Example:<button hx-get="/data" hx-indicator=".loader">Load Data</button>
Conditional Requests:
-
hx-boost
: Preload content for elements on page load. Example:<div hx-boost="#element-id">Preload Content</div>
-
hx-poll
: Periodically refresh content from the server. Example:<div hx-poll="5000" hx-get="/data">Auto Refresh</div>
Response Handling:
-
hx-headers
: Set custom HTTP headers in the request. Example:<button hx-get="/data" hx-headers="Authorization:Bearer TOKEN">Load Data</button>
-
hx-select
: Apply CSS selectors to the response to extract specific content. Example:<div hx-get="/data" hx-select="#content">Load Data</div>
-
hx-confirm
: Display a confirmation dialog before executing the request. Example:<button hx-get="/delete" hx-confirm="Are you sure?">Delete</button>
Error Handling:
hx-on-error
: Define JavaScript code to run when there's an error. Example:<button hx-get="/data" hx-on-error="alert('Error occurred')">Load Data</button>
Miscellaneous:
-
hx-push-url
: Push a new URL to the browser's history without a full page reload. Example:<a href="/newpage" hx-push-url="true">Go to New Page</a>
-
hx-vals
: Attach form values to a request. Example:<form hx-post="/submit" hx-vals="true">...</form>
Server-Sent Events (SSE):
hx-sse
: Set up Server-Sent Events for real-time updates. Example:<div hx-sse="/sse-endpoint">Real-time Updates</div>
Events:
HTMX triggers custom events (e.g., htmx:load
, htmx:afterSwap
) that you can listen to in JavaScript.
Python Framework Integration:
Various Python web frameworks like Flask and Django offer HTMX integration libraries for server-side functionality.
Security Considerations:
Always validate, sanitize, and secure user inputs. Implement CSRF protection and authentication on the server.
Additional Resources HTMX Documentation: https://htmx.org/docs
HTMX GitHub Repository: https://github.com/bigskysoftware/htmx
HTMX Examples and Demos: https://htmx.org/examples