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?

Talk Python's Mastodon Michael Kennedy's Mastodon