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.