HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Changing our mind, adding a cancel option

Login or purchase this course to watch this video and the rest of the course contents.
0:00 So are we finished? Have we done our "Click to Edit"? Almost.
0:04 Not quite. Not all the way.
0:06 So yeah, we've got this cool section on EVs, were able to add this big
0:10 changes coming for the Mustang Mach E,
0:12 which is fantastic, and we can add more videos.
0:17 But what if we click that button right there and like,
0:18 oh actually you know what? I changed my mind,
0:22 I decided not to add a video.
0:23 Do I have to just live with it hanging out there forever and depending on what
0:27 kind of page you're creating, this might not matter, just whatever. You navigate away and
0:31 it's gone. However, if this is a very dynamic page, and you're interacting a
0:36 lot with it, you might want this to go away, to have a cancel button
0:39 let's go and change this to have that cancel button, and we'll learn a couple of
0:44 interesting things while we're at it.
0:46 Let's go over here and say actually that's not a submit.
0:50 This is going to be a Cancel and let's make this success,
0:55 let's say green is going to be the submit And over here we're gonna have a
0:59 button that says Cancel. Now, this is going to get a little bit interesting because
1:04 how does this cancel operate? Do we want to put it back
1:07 so it looks just like this?
1:09 right? That's what cancel for us will mean, What we want to do is somehow
1:13 get that HTML and put it here, that we have on the page right here,
1:20 right? We want to put that back into place.
1:23 How do we get that? Well we got to go to the server and get
1:26 that from somewhere, but there's no real way in Jinja templates to say exclude everything
1:33 but this, it's easy to say include or exclude this section conditionally,
1:39 but you can't say drop everything else and return this.
1:42 So we're going to need another little one of these HTML fragments or HTML partials.
1:47 We'll call this show_add_form.html and just like before none of this.
1:57 So here's where we get into a place that's going to be kind of clunky for
2:00 now. It's gonna get really,
2:01 really awesome as we go on.
2:04 So we're gonna have this HTML there, and we're going to have it here.
2:09 Does that seems like a great idea?
2:10 What if I want to change this word or make that a capital A or whatever?
2:15 And it's going to possibly need to be changed in the same place,
2:18 right? So that is a problem, and we will address it.
2:22 But let's just first acknowledge like,
2:23 hey, that's not ideal. It's a problem.
2:26 And I'll show you some really cool ways to fix this.
2:29 What we need to do is we need to get this HTML back over here when
2:34 you hit cancel. Well how do we get this HTML, this form over there in
2:38 the first place? We did a GET like that,
2:43 right? So we're going to do something super similar in our form,
2:48 going to come down here and say GET, but we're gonna say cancel_add.
2:52 We're going to pass over the category.
2:56 This is now known as cat_name here.
2:59 Why do we have to pass that over?
3:01 Well, when we get the form back,
3:04 we're going to need to pass that over.
3:08 Right, we're going to need to pass the category right there.
3:12 Right. So we have to basically propagate this category name over and over.
3:16 And again, let's just call this cat_name.
3:22 So what we're gonna do is we want to do a GET. Remember,
3:24 We need to swap it out, and we can actually do uh what's called a target.
3:27 We can say hx-target because we're not just possibly swapping out our outer HTML.
3:33 We need to go somewhere else larger on the page, and we're going to do
3:38 this. That's that's why we wanted this CSS name here.
3:41 So the target is going to be .video-form.
3:44 Right? That's the CSS selector
3:46 to get this larger thing. It could be somewhere outside of the tree of this,
3:49 we could be changing other parts of the page but there you go.
3:53 Let's put it like that. We need to write this code right here
3:57 but let's just see what it looks like
3:58 first. We refresh, now we add a video.
4:04 Oh, here's our Create, trying to submit it, Cancel,
4:08 doesn't do anything yet. You can notice there's stuff happening, just trying to go get this
4:11 Cancel. It can't, but that's okay.
4:14 That's really, really good. Were basically getting everything to work. Final thing.
4:18 Let's go and add that cancel.
4:20 So we've got our GET, our POST and remember what information did this one need?
4:24 Well, it really basically just needed the category name, that is our cancel.
4:28 So let's do it like this and here's the URL
4:32 All right here,
4:35 cancel_add category. The partial that we're going to do is show_add_form.
4:41 So the partial we're gonna do is show_add_form.html like that.
4:46 Give it a little spacing and then again this needs to change.
4:49 Let's call this cancel_add. I'm not going to do a GET, POST because there's
4:53 only ever a GET on it. And let's put this at the bottom, and I don't,
4:58 I'm going to do our add stuff and then our possibly cancel there.
5:02 All right, let's run it one more time and see how things work.
5:06 We're gonna refresh. Guess we wouldn't actually have to refresh.
5:09 But I did. Let's try to add a video.
5:13 You know what? Changed my mind,
5:14 I don't want to add the video,
5:15 cancel. Look at that. It's back.
5:19 Okay. Our add video is back, and it was pretty quick the way that happened
5:23 Right? But notice that this is not, this is not redirecting or refreshing.
5:29 It just doesn't have a delay on it.
5:30 So we go add a video,
5:32 there's a form. We can cancel it.
5:34 You add a video and again let's go at our Ford video, like that and make
5:42 sure the whole thing works round trip.
5:44 It's back. Very, very cool.
5:46 So we're able to use multiple aspects of this
5:49 "Click to Edit". A little bit more advanced than what they have over on the example
5:53 page, but still the same core idea of what's happening.