HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Server returns the form on-demand
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We saw that we added our little hyperlink here to add, basically show the add form, but the server wasn't ready to do that.
0:09
So we're trying to do a GET against videos/add some category. Let's go look over at the videos controller. Now we have this for POST videos/add,
0:18
some category. But for POST, right? This was what we had already implemented to actually save the form and add the video, and it was working.
0:27
But what we need to do instead or in addition is to first provide the form and then let this, then we can sort of follow this path here.
0:37
So let's go like this, and I'm gonna duplicate that real quick. We can do a get, make sure we call the method name something reasonable,
0:44
like add_get, and we're going to do a whole lot less work here. We're not getting the data, we're not doing redirects, we're not do anything like that.
0:54
What we're going to do instead is we're going to render a template, and I've got this cool decorator that will make that easier.
0:59
And what are we going to render? We're gonna render videos/partials/ whatever we call this.
1:12
There, add_video_form. This is only going to return that small little bit of the form, right? Just that fragment of HTML.
1:20
And what data does that form need to work with? Well, well, it actually works with what we have here.
1:28
Right, the same thing as our view model. Almost, you'll see there's one minor change
1:33
we're gonna need to do. So the way this response decorator works is we return a dictionary, it turns it into HTML or the data that's passed to the form
1:42
which then turns into HTML. The one thing that we need to make a change to is, this is category.category.
1:49
And in our view model, if you look real quick. It's just called cat_name. Maybe not the best name but we're going to need
1:57
to use that right there, or we're going to run into trouble. Other than that I think we might be good to go.
2:03
Let's give this a try. Probably don't even need to actually refresh this. Let's try again. Oh yes.
2:10
Did you see that? Here, I'll refresh the page to reset it and watch. It's going to go to the server,
2:15
it's going to get that information and then instead of just popping into existence it's gonna fade this video in. Notice, It did not refresh the page,
2:23
the scroll position didn't change. Notice, I'll do it one more time, up at the top. There will be no like firefox navigation.
2:31
Just all AJAX, all behind the scenes like you would expect. Super cool, right? Well, we're over in the EVs section. so let's add another video.
2:40
How about this Cool. Mach-E thing coming from Ford. Major changes coming to Mach E - Ford Listened! Thank you Ford, so amazing.
2:51
We have the ID, who is the author, Rev, and it's got however many views that is. Remember this was loaded, this form dynamically from htmx.
3:03
We've made no other changes than to put that button and then, later on, add this form, and it works like a champ, right? There it is.
3:12
There's our video. Yes. And the reason it worked is because there was nothing really that changed. We have a form on the page,
3:22
we submit it, we process it, and we redirect back over here. We could do a little more work with htmx to have it sort of replace
3:31
this section of the page. But I kind of think what we've got so far is good enough. You can enhance this further with htmx, but really nice, isn't it?