HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: A clean, enable add button, without the form
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So what we would like, instead of having this big form here, we look over, and we have this big form that's just permanently stuck to the bottom
0:08
of all the categories, is we want something clean and subtle, like a little tiny button that says add a video here,
0:14
you know, something that looks maybe like this or something along those lines. Not this huge form and we'd like to bring it in with
0:20
htmx, make the changes and then bring it back out, or decided we don't want to. So that's what we're gonna do now, and let's just
0:29
start by getting something in here. What we're gonna do is we're gonna use a hyperlink. One of the things that's cool about htmx
0:35
is this could be an image, it could be a paragraph, could be whatever,
0:38
right? You don't have to just hook hyperlinks, but we're actually gonna use one anyway so we're not gonna set the href. Instead,
0:46
let's just put some things into it first. Let's go over here and say that we're going to have an <i>, we're gonna use font-awesome and font-awesome,
0:54
is pretty awesome. If you're not familiar with that, font-awesome, it let's you have all sorts of cool icons and like,
1:00
like you put a YouTube image in your page but it's actually stylable like text, you can set its size and its color and so on. So the way we do that,
1:08
we're just gonna say "fas fa-plus-circle" like that, and we'll just call, add a video. Now if we go back and refresh this,
1:18
Ups, I've got to restart, then refresh. There we go. We've got this cool little add a video button right there,
1:23
that looks great, right? Except what we want is we want this to appear only when we click this button, when we click this hyperlink.
1:33
So that's where, well, htmx stuff comes into play. We're gonna somehow need to return this when we click this button and then put it
1:42
in here. So what we're gonna do is I'm gonna put this content into another
1:48
section. Now, something that's incredibly common, and htmx is returning fragments of a page fragments of HTML, not the main one.
1:58
And I want to somehow distinguish the small pieces from the holes over here in our
2:03
templates. So what I'm gonna do, and we're gonna go way into this later.
2:08
I'm going to create a folder called partials and then put some views in there that we can use. We're going to do this kind of the heart and clunky way
2:15
at first, I'm gonna show you some libraries we can use to make this even better. But let's just go over here and add some HTML and what are we
2:24
going to call it? Let's call it, add_video_form, something like that, all of this, all this stuff here. Now, we don't want this,
2:34
we only want partial HTML. This is unlike, say up here, where we have it extend other things. This doesn't extend anything.
2:43
This is the entirety of what we're working with here. Okay? This is pretty different. So down here. We're just going to have this add. Now,
2:54
how does htmx do anything with this? So what we need to do is we need to set some hx tags.
3:02
So we're gonna say hx-get and I'll give it a URL, /videos/add/ and just like we had before, category: category.category. Like so. When it gets this,
3:20
what is it supposed to do? It's supposed to replace this little hyperlink with its text and its icon with that form
3:27
So the response here when we go and do a GET over here, this does not exist yet. This one.
3:35
Remember this is a POST. We're going to do a GET that's similar but not the same. So when we do that GET we're going to hx-swap
3:43
something, and what we want to swap is outerHTML. Now we could just pop that into existence. but it would be nicer if it kind
3:54
of faded from one to the other. So we can say swap .25 seconds. So it fades in the form in a really nice way. And then if it goes away for some reason,
4:04
let's say I want to set the class to fade-me-out, like that. Refresh, we run it. Now, check this out.
4:15
We've got this hyperlink, notice it now looks like a hyperlink, whereas before it didn't have that color and the form is gone.
4:22
But if we click it, nothing is happening. Down here, you can see stuff is happening. We're trying to do a GET to video/add/EVs and we're getting
4:31
a 405. Basically, nope, not there. The final thing we need to do to make this work is we
4:38
need to return that form over here and then that will get things set up where the form will now be on the page. Remember we're trying to go here.
4:47
htmx is already working, it's trying to go here and get this content and swap it, but the server is not yet ready to do that.