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