HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Course conclusion and review
Lecture: HTMX attributes
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
You use HTMX by adding attributes to your HTML tags. The first attribute you learned about was hxget. This specifies the URL to fetch new content from.
0:15
The received response is used to modify the existing page. Which part of the page changes and how is determined by other HTMX attributes.
0:27
When you use hxget on an input tag, the associated URL is called with a query parameter containing the value of the input box.
0:36
You used this feature to implement the search-as-you-type mechanism. hxswap is one of the attributes used to specify how to replace content.
0:47
A value of innerHTML causes the contents inside the tag to be swapped, while outerHTML swaps
0:55
out the entire tag. You can also add the Swap modifier to this attribute to specify a delay
1:02
in action. This can be handy if you're timing the appearance of the change with other CSS transitions or animations.
1:12
Instead of swapping content on the current tag, you can target content anywhere in the
1:16
document using HXTarget. The value of HXTarget is typically a CSS selector specifying the
1:23
tag to be replaced by the fetched response. The HXTrigger attribute specifies when HXGet
1:32
gets invoked. A value of KeyUp invokes the fetch when a key is pressed and released.
1:39
You can modify KeyUp when the trigger is on an input tag with the Changed modifier.
1:44
This limits the invocation to cases where the key press also changes the value of the input.
1:52
You can also add a delay modifier to specify how long after a press htmx should wait before invoking
1:59
the fetch. This is useful to limit the number of times the server is called. If the user is
2:05
typing something quickly, you can wait until after they're finished. You can further limit a trigger
2:11
by adding conditions in square brackets. The conditions are based on the event being triggered.
2:18
The example here restricts triggers only to those keyup events where the value of the input is
2:23
longer than one character. You used this restriction to prevent searching on a single letter in the
2:29
Search Issue Type feature. In addition to supporting JavaScript events, HTML provides some of its own.
2:36
The revealed event happens when the associated tag is made visible in the browser's viewport.
2:44
This can be used to cause an action when a user scrolls something into the frame.
2:48
You used this to implement infinite scroll in the Video Collector project.
2:53
Adding hx_push_url=true as an attribute causes htmx to update the browser's URL when a fetch is invoked. This enables deep linking on your site,
3:07
and allows the user to hit the back button to go back to a previous fetch. HTMX does its best to interact with other frameworks in a friendly fashion.
3:17
Events that HTMX processes are passed through to the tag so other frameworks can see them.
3:23
In this course, you combined Bootstrap's ability to display pop-up modal dialogues with HTMX to dynamically specify their content.