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

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:05 of form or parallel admin organization for our videos, but we wanted to just go to the end of the category and say let's add one more to this category.
0:14 We've got this HTML form here that we're gonna fill out. Of course we didn't want that there all the time.
0:19 We wanted a subtle little button or hyperlink, you could click that would then show this, and when you save it back it goes away
0:25 So the way we did this is we just put a hyperlink with some font-awesome plus circles in the text "add a video". We had two htmx attributes.
0:35 We said hx-get video/add/ where the category name is. Remember htmx is going to go do a request against that
0:44 when we click the hyperlink. Whatever HTML is returned, we're gonna swap it out. And that's what we're saying next with hx-swap,
0:51 replace this entire element with whatever comes back from the server. What came back was this form that would let us edit that.
1:00 This is what you saw on the screen with the red circle around it. And we have a button to submit it and also a cancel button. Here
1:07 we have a GET for video/cancel_add/{{ cat_name }} and then we set the target which is not outer HTML but a larger,
1:14 different piece that's actually the whole form. And when we get that one it just returns the HTML you saw previously.
1:21 So super simple. We basically juggled these two things back and forth. Whether or not we wanted to have the add link or have the add form,
1:28 we cancel it, we put the link back, otherwise we submit it, and we just redirect back to the page again.
1:33 We could have actually done more interesting things on that post back instead of redirecting. But I felt like at that point this feature was being,
1:41 our first feature was already complicated enough. And wanted kind of to keep it straight down the line and not get too complicated with
1:47 what's going on here. Very nice. We can take this further, and you're welcome to do so as you keep going with htmx.

Talk Python's Mastodon Michael Kennedy's Mastodon