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