HTMX - AJAX

Quiz

Main motive of HTMX is to send AJAX requests directly from HTML without using JavaScript, this is possible for HTMX attributes. When a specific event is triggered one of these below mentioned attributes will make an AJAX request to the given URL.

HTMX Attributes

The most used attributes are listed below which are used to send AJAX requests directly from HTML. Each of these attributes takes a URL to issue an AJAX request.

hx-get: This attribute perform the GET request to the given URL.
hx-post: This attribute perform the POST request to the given URL.
hx-put: This attribute perform the PUT request to the given URL.
hx-patch: This attribute perform the PATCH request to the given URL.
hx-delete: This attribute perform the DELETE request to the given URL.

Example of AJAX Request in HTMX

The element will issue a request of the specified type to the given URL when the element is triggered.

Triggering Request

AJAX requests are triggered by natural events like mouse-in or mouse-out on an element. Like input, textarea, and select are triggered on the change event. The form is triggered on the submit event and all others are triggered on the click event. To customize these behaviors you can use hx-trigger attribute to specify which event will be the reason for the request.

<div hx-post="/mouse_leave" hx-trigger="mouseleave">
 [Here Mouse, Mouse!]
</div>

Trigger Modifiers: You can modify the behavior if you want a request to trigger only once then simply add once keyword for the trigger. You can check below listed modifiers.

once: Trigger a request only once.
changed: Trigger a request if the value of the element has changed.
delay:<time interval>: Trigger a request after the given time, if the etriggers again countdown will start from the beginning.
throttle:<time interval>: Same as a delay but if the event occurs before the limit end then the event will be discarded. So the request will be triggered at the end of the time p.
from:<CSS Selector>: Wait for the event of different element. This can be used to trigger requests on keyboard shortcuts.

<div hx-post="/mouse_leave" hx-trigger="mouseleave once">
 [Here Mouse, Mouse!]
</div>

Trigger Filters: You can apply trigger filters to trigger requests. To do so you can use square brackets ([]) after the event names. Below example that triggers only on a Control-Click of the element

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">
 Control Click
</div>

Special Events: There are some special events to use hx-trigger attribute.

load: It trigger when the element is first loaded.
revealed: It triggers when the element first scrolls into the viewport.
intersect: It trigger when the element first intersects the viewport. This supports two additional options
- root:<selector>: CSS selector of the root element for intersection.
- threshold:<float>: 0.0 to 1.0 indicate what amount of intersection is a must to trigger the event.

You can also use custom events to trigger requests if you have an advanced use case.

Polling: You can set polling on an element when you want the element does not wait for the event by using the every as the value of hx-trigger attribute.

As in the below pseudo code it tells every 2 seconds, to issue a GET to /content and load the response into the div element.

<div hx-get="/content" hx-trigger="every 2s"></div>

Load Polling: There is another of Polling that's Load Polling, where the element specifies a load trigger with the mentioned time delay and replaces itself with the response.

<div hx-get="/messages"
 hx-trigger="load delay:1s"
 hx-swap="outerHTML"
>
</div>

Request Indicators

When an AJAX request is made you will need to inform the user that the request got initiated. You can use htmx-indicator class on the child element as shown in the below pseudo code.

<button hx-get="/click">
 Click Me!
    <img class="htmx-indicator" src="/spinner.gif">
</button>

In this code we have a button and when the button is clicked a GET request will be triggered and that time a spinner will popup and show the user that the AJAX request is initiated.

Targets

You can set the element where you want to load the requested response by using hx-target attribute. Here in this code, you can see that the requested response will be rendered on div#search-results element.

<input type="text" name="q"
 hx-get="/trigger_delay"
 hx-trigger="keyup delay:500ms"
 hx-target="#search-results"
>
<div id="search-results"></div>

Swapping

The content replaces the innerHTML of the target element. You can modify this by using the hx-swap attribute. There are some predefined values like innerHTML, outerHTML, afterbegin, etc values.

Morph Swaps: Morphing swaps attempt to merge new content into the existing DOM.
View Transitions: View Transitions API allows developers to create an animated transition between different DOM states it is not supported by all the browsers as of now.
Swap Options: There are certain options in swapping when you are using hx-swap attribute.

Swap modifiers appear after the swap style is specified and are separated by a colon.

Synchronization

Synchronization are performed between two elements by using hx-sync attribute. This will be required when you may want a request from one element to supersede the request of another element or to wait until the other element's request has finished.

CSS Transitions

HTMX supports transition without using JavaScript, this is one of the best features that HTMX have.

<div id="div1">Original Content</div>

<div id="div1" class="red">New Content</div>

.red {
 color: red;
 transition: all ease-in 1s ;
}

Both the div has the same id and red class on the second element, so when the HTMX swaps in this new content then the defined CSS will be applied on the new content.

Out of Band Swaps

If you want to swap content from a response directly into the DOM you can use the hx-swap-oob attribute with true value.

<div id="message" hx-swap-oob="true">Swap me directly!</div>

Parameters

Parameters are a must for those elements that trigger AJAX requests. The element that causes a request will include its value if it has one. If the element is a form it will include the values of all inputs within it.

File Upload: If you want to upload files via an htmx request, you can set the hx-encoding attribute to multipart/form-data.
Extra Values: Extra values can be added by using hx-values attribute.

Confirming Requests

Before triggering and requesting it is good practice to confirm the request to do so you can use hx-confirm attribute. This allows you to confirm an action using a simple javascript dialog

<button hx-delete="/account" hx-confirm="Are you sure?">
 Delete My Account
</button>

Print Page