HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Concept: Showing the edit UI
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Before we got to htmx, we just had the form to add a new video just jammed
0:04
at the bottom of the page.
0:05
And yeah sure we could have added an admin section that was like a parallel oh
0:10
here you can admit a category and navigate in there, or you could be in a
0:13
category and just look at it.
0:15
I really like the fact that you can kind of edit it live right there,
0:18
you're in there, just I'm in a category,
0:20
I want to add something click to add,
0:22
that's great. However, having a huge form stuck at the bottom was a real
0:26
drag. So we used htmx to add a tiny little plus icon and a
0:31
add a video bit at the bottom
0:33
that was really subtle, and if you want to add it, you click it and right
0:36
there the form just fades in, and you can add the video.
0:39
How do we do that? Well we have to go to the server and get
0:43
the form HTML, remember? that's the core way that htmx works. It's really about
0:48
adding attributes that allow you to on demand or on some trigger pull fragments of HTML
0:55
from the server and then replace parts of the page with that.
0:59
So what we did is we said we're gonna do a GET to a URL when
1:03
somebody interacts with this, when they click it.
1:06
So hx-get and we could come up with whatever URL we wanted.
1:09
We said video/add/{{ cat_name}}.
1:13
That might be strange because we already had that as the destination for our form. But
1:17
remember, Flask separates requests by HTTP verb.
1:21
So this is going to the GET one we wrote and the form submission was going to
1:25
the POST which worked out pretty well because actually the data exchange was basically the same.
1:30
When this HTML fragment comes back,
1:32
what do we do? We want to swap out this hyperlink.
1:35
We want to completely get rid of it and replace it with whatever the server gave
1:38
us, which we know will be the form. So we do a swap on outerHTML,
1:43
and we also say swap: .25s,
1:46
make it fade out. We also had to have that class there to make that
1:49
happen. That was it. Instead of just having the form on the page,
1:53
we do this very simple thing to say.
1:54
Here's the URL to get the form in a smooth,
1:57
classy fade in fade out way, when the user wants it.
2:00
Otherwise just have a hyper link on the page, beautiful.