When building dynamic web applications, there’s often a need to load multiple items onto a page without triggering a full-page refresh. HTMX is a powerful tool for achieving this, especially with its out-of-band (OOB) swaps and event triggers. In this article, we’ll explore how you can use these features to enhance your page loading experience.

What is HTMX?

HTMX allows you to add AJAX-driven interactivity to your HTML without needing a full JavaScript framework. With HTMX, you can use attributes like hx-get, hx-post, and hx-trigger to send HTTP requests, replace content, and react to user events — all by simply adding attributes to HTML elements.

Loading Multiple Items with HTMX

One approach to dynamically loading content is to use HTMX’s Out-of-Band (OOB) swap, which enables you to update elements on the page without making them the direct target of the response. Another method is to use hx-trigger events, where elements listen for specific actions on the page and then send their own request to the backend to update themselves in response. Both techniques provide flexible ways to load and update content seamlessly.

Here’s how you can implement this.

Out-of-Band Swapping with hx-swap-oob

The hx-swap-oob attribute in HTMX is powerful because it allows you to update any element on the page without requiring that element to trigger the request itself. You simply place hx-swap-oob="true" in the response HTML element you want to update, along with its id. HTMX will automatically find this element in the DOM and update it with the content from the server.

Example

<div hx-swap-oob="true" id="element-id">
Updated content
</div>

This snippet, when included in a server response, will look for an element with the id="element-id" on the page and update it with “Updated content.”

Updating content with hx-trigger

hx-trigger lets you specify when the request should happen. You can trigger events based on events happening on the page.

Here’s an example:

<li hx-get="{% url 'update-partial' %}"
hx-trigger="hx_new_partial from:body"
hx-swap="innerHTML">
{% include 'partial.html' %}
</li>

In this code:

  • hx-get="{% url 'update-partial' %}" sends an HTTP GET request to the specified URL when triggered.
  • hx-trigger="hx_new_partial from:body" sets up a custom event (hx_new_partial) to trigger the request from anywhere within the body.
  • hx-swap="innerHTML" specifies that the response content will replace the inner HTML of this <li> element.

To initiate the custom event (hx_new_partial) from the server, you can add an HTTP header in your server response to dispatch the event when the response is received on the client side. This way, HTMX will trigger the custom event automatically, without any additional user action.

def update_partial(request):
response = render(request, 'partial.html')
response['HX-Trigger'] = 'hx_new_partial'
return response

In this example:

  • The HX-Trigger header is added to the response to automatically dispatch the hx_new_partial event, allowing the hx-trigger attribute to be triggered on the client-side.

With this setup, HTMX can update the content dynamically whenever the custom event is triggered, keeping the page experience fluid and interactive.

Final Thoughts

HTMX’s out-of-band swap and trigger events are incredibly useful for creating highly interactive, dynamic pages. By letting you control when and where updates occur, they make it easy to load multiple items onto a page and ensure the experience feels seamless to users. With just a few HTML attributes, you can achieve a sophisticated, responsive interface without relying heavily on JavaScript.