HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Inserting the Click to edit link
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Ignoring the new attributes for a second, what you have here is an HTML link.
0:08
If you haven't seen Font Awesome before, it's an icon toolkit and it uses the italics tag as a hook for inserting pretty pictures.
0:17
This will show as a circled plus sign, along with the ""Add New Video"" words in the link. Now to the new stuff - the hx attributes.
0:29
this link doesn't have an href. In this case, the hxget is taking its place. All the htmx
0:37
attributes begin with an hx suffix, and as you might guess, the get says to fetch the contents
0:43
from a URL. As I'm a good little programmer, albeit a lazy one, instead of hardcoding the URL,
0:51
it's using a django_url tag. This tag is pointing to a view I haven't written yet,
0:57
which is responsible for sending the form contents you just watched me move
1:01
into the new partial file. hs_get says where to go get the new content from. While hs_swap says what to do with the content.
1:17
The first argument to hx_swap tells it what to do. In this case, outer HTML means to replace
1:25
the outer tag. That's the link. By contrast, another supported choice is inner HTML, which
1:32
would replace the contents inside of the link, leaving the link itself intact, if that's what
1:38
you preferred. The HXSwap attribute also supports modifiers. The badly named swap modifier tells
1:47
htmx to put a little delay in before actually swapping out the contents. Other tags actually
1:53
support a modifier named ""delay"", it's unclear to me why they didn't name this one ""that"".
1:59
Anyhow, I'm not actually doing anything with this delay, but it can be useful if you want to use
2:05
CSS transition effects and need to time how they work. Take a moment and bask in the glory of just
2:12
how clean this is. Without HTML, you'd have to have the link and the form, and the form would would have to be hidden from the start.
2:21
You'd need to worry about when your JavaScript fired, register it properly after the page was loaded, and you'd have a bunch of JavaScript
2:29
handling the transition in a place elsewhere in the file or in another file altogether. With HTMX, the context of what is about to happen
2:39
is right there on the tag. There isn't anything hiding elsewhere in the HTML and the page only contains those things it needs right now.
2:48
Think about a complicated single page application with loads of dialog boxes.
2:53
With HTMX, none of those have to be loaded until after the user does something that requests them.
2:59
This is just so tidy. At risk of sounding all fanboy, I think I'm in love.
3:05
One last thing to do in the HTML, which is to actually load the HTMX toolkit.
3:11
I'm going to do that in the base file, so it can be used on any of our pages.