HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Course conclusion and review
Lecture: Click to edit functionality

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 The first feature we added was "Click to Edit", of course we could have some sort
0:04 of form or parallel admin organization for our videos, but we wanted to just go to
0:10 the end of the category and say let's add one more to this category.
0:13 We've got this HTML form here that we're gonna fill out.
0:16 Of course we didn't want that there all the time.
0:18 We wanted a subtle little button or hyperlink,
0:21 you could click that would then show this, and when you save it back it goes away
0:24 So the way we did this is we just put a hyperlink with some font-awesome
0:29 plus circles in the text "add a video".
0:31 We had two htmx attributes.
0:34 We said hx-get video/add/ where the category name is.
0:39 Remember htmx is going to go do a request against that
0:43 when we click the hyperlink. Whatever HTML is returned,
0:47 we're gonna swap it out. And that's what we're saying next with hx-swap,
0:50 replace this entire element with whatever comes back from the server.
0:55 What came back was this form that would let us edit that.
0:59 This is what you saw on the screen with the red circle around it.
1:02 And we have a button to submit it and also a cancel button. Here
1:06 we have a GET for video/cancel_add/{{ cat_name }} and then we set the target
1:11 which is not outer HTML but a larger,
1:13 different piece that's actually the whole form.
1:15 And when we get that one it just returns the HTML you saw previously.
1:20 So super simple. We basically juggled these two things back and forth.
1:23 Whether or not we wanted to have the add link or have the add form,
1:27 we cancel it, we put the link back,
1:28 otherwise we submit it, and we just redirect back to the page again.
1:32 We could have actually done more interesting things on that post back instead of redirecting.
1:37 But I felt like at that point this feature was being,
1:40 our first feature was already complicated enough.
1:42 And wanted kind of to keep it straight down the line and not get too complicated with
1:46 what's going on here. Very nice.
1:48 We can take this further, and you're welcome to do so as you keep going with htmx.