The HTMX hx-get attribute turns an interaction with an HTML element into an HTTP GET request. The server can return an HTML partial rather than a whole page, and HTMX places that response into the existing page. Pair hx-get with hx-target to choose the destination and hx-swap to choose how replacement happens. section 12.2 section 12.7
This keeps a page from reloading just to update one area. A link can fetch a new song and replace its current content; a div can show a loading message until slower content arrives. The URL assigned to hx-get is the endpoint that supplies the replacement HTML. section 12.2 section 12.3
Use hx-get in several interaction patterns:
- Lazy load delayed content with hx-trigger="load". The GET runs after the page loads, and the response replaces the placeholder element. section 12.3
- Search as the user types by putting hx-get on an input and using hx-trigger="keyup changed delay:500ms". Input text is included as a URL query parameter. section 12.4
- Load another results page when a sentinel element becomes visible with hx-trigger="revealed"; hx-swap="outerHTML" can replace that sentinel with the returned results. section 12.4
- Replace a displayed item with an edit-form partial on click, then use hx-post to submit the form and hx-get again to cancel back to the display partial. section 12.5
Lazy-load a promoters list
Place hx-get on a div that initially contains “Loading promoters...”, and set hx-trigger="load". Once the page finishes loading, HTMX requests the partial-promoters URL. Its Django view renders only the promoter-list partial, which replaces the div’s placeholder content. section 12.3
Listing 12.2 A promoters listing template
<!-- RiffMates/templates/promoters.html -->
{% extends "base.html" %}
{% block title %}
{{block.super}}: Promoter Listing
{% endblock %}
{% block content %}
<h1>Promoters</h1>
<div
hx-get="/promoters/partial_promoters/" #1
hx-trigger="load"> #2
<i> Loading promoters... </i> #3
</div>
{% endblock content %}
The template shows the smallest lazy-loading setup: a div, an hx-get URL, a load trigger, and visible fallback content. section 12.3
Django can keep one search view for both ordinary navigation and HTMX requests. It reads the search query, builds musician results, and checks request.htmx: an HTMX call renders only the results partial, while a normal request renders the full search page. This lets a deep-linked search work without requiring HTMX for the initial render. section 12.4
Include the HTMX library in the base template before these attributes can act. In a Django application, also register the GET endpoint and make its view return the partial expected by the targeted page region. A request invoked by HTMX carries a header that can distinguish it from a normal request. section 12.3 section 12.7
