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