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,
0:06 but the server wasn't ready to do that.
0:08 So we're trying to do a GET against videos/add
0:11 some category. Let's go look over at the videos controller.
0:15 Now we have this for POST videos/add,
0:17 some category. But for POST,
0:20 right? This was what we had already implemented to actually save the form and add
0:24 the video, and it was working.
0:26 But what we need to do instead or in addition is to first provide the form
0:32 and then let this, then we can sort of follow this path here.
0:36 So let's go like this, and I'm gonna duplicate that real quick.
0:38 We can do a get, make sure we call the method name something reasonable,
0:43 like add_get, and we're going to do a whole lot less work here.
0:47 We're not getting the data, we're not doing redirects,
0:49 we're not do anything like that.
0:53 What we're going to do instead is we're going to render a template, and I've got
0:56 this cool decorator that will make that easier.
0:58 And what are we going to render?
1:00 We're gonna render videos/partials/ whatever we call this.
1:11 There, add_video_form. This is only going to return that small little bit of
1:15 the form, right? Just that fragment of HTML.
1:19 And what data does that form need to work with?
1:23 Well, well, it actually works with what we have here.
1:27 Right, the same thing as our view model. Almost, you'll see there's one minor change
1:32 we're gonna need to do. So the way this response decorator works is we return
1:36 a dictionary, it turns it into HTML or the data that's passed to the form
1:41 which then turns into HTML. The one thing that we need to make a change
1:45 to is, this is category.category.
1:48 And in our view model, if you look real quick.
1:52 It's just called cat_name. Maybe not the best name but we're going to need
1:56 to use that right there, or we're going to run into trouble.
2:00 Other than that I think we might be good to go.
2:02 Let's give this a try. Probably don't even need to actually refresh this.
2:06 Let's try again. Oh yes.
2:09 Did you see that? Here, I'll refresh the page to reset it and watch.
2:13 It's going to go to the server,
2:14 it's going to get that information and then instead of just popping into existence it's gonna
2:18 fade this video in. Notice, It did not refresh the page,
2:22 the scroll position didn't change. Notice,
2:24 I'll do it one more time, up at the top.
2:27 There will be no like firefox navigation.
2:30 Just all AJAX, all behind the scenes like you would expect.
2:34 Super cool, right? Well, we're over in the EVs
2:37 section. so let's add another video.
2:39 How about this Cool. Mach-E thing coming from Ford.
2:44 Major changes coming to Mach E - Ford Listened!
2:47 Thank you Ford, so amazing.
2:50 We have the ID, who is the author, Rev, and it's got however many views
2:56 that is. Remember this was loaded, this form dynamically from htmx.
3:02 We've made no other changes than to put that button and then, later on, add this
3:07 form, and it works like a champ, right? There it is.
3:11 There's our video. Yes. And the reason it worked is because there was nothing
3:19 really that changed. We have a form on the page,
3:21 we submit it, we process it, and we redirect back over here.
3:25 We could do a little more work with htmx to have it sort of replace
3:30 this section of the page. But I kind of think what we've got so far
3:35 is good enough. You can enhance this further with htmx,
3:39 but really nice, isn't it?