HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Concept: Showing the edit UI

Learn more about this course
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.