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.

Talk Python's Mastodon Michael Kennedy's Mastodon