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 at the bottom of the page.
0:06
And yeah sure we could have added an admin section that was like a parallel oh
0:11
here you can admit a category and navigate in there, or you could be in a category and just look at it.
0:16
I really like the fact that you can kind of edit it live right there, you're in there, just I'm in a category, I want to add something click to add,
0:23
that's great. However, having a huge form stuck at the bottom was a real drag. So we used htmx to add a tiny little plus icon and a
0:32
add a video bit at the bottom that was really subtle, and if you want to add it, you click it and right
0:37
there the form just fades in, and you can add the video. How do we do that? Well we have to go to the server and get
0:44
the form HTML, remember? that's the core way that htmx works. It's really about
0:49
adding attributes that allow you to on demand or on some trigger pull fragments of HTML from the server and then replace parts of the page with that.
1:00
So what we did is we said we're gonna do a GET to a URL when somebody interacts with this, when they click it.
1:07
So hx-get and we could come up with whatever URL we wanted. We said video/add/{{ cat_name}}.
1:14
That might be strange because we already had that as the destination for our form. But remember, Flask separates requests by HTTP verb.
1:22
So this is going to the GET one we wrote and the form submission was going to
1:26
the POST which worked out pretty well because actually the data exchange was basically the same. When this HTML fragment comes back,
1:33
what do we do? We want to swap out this hyperlink. We want to completely get rid of it and replace it with whatever the server gave
1:39
us, which we know will be the form. So we do a swap on outerHTML, and we also say swap: .25s,
1:47
make it fade out. We also had to have that class there to make that happen. That was it. Instead of just having the form on the page,
1:54
we do this very simple thing to say. Here's the URL to get the form in a smooth, classy fade in fade out way, when the user wants it.
2:01
Otherwise just have a hyper link on the page, beautiful.