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: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.