HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Rendering the videos found in search

Login or purchase this course to watch this video and the rest of the course contents.
0:00 While I'm sure people were super excited to be seeing the number of results,
0:06 they probably actually want to see the results when they're doing a search. So let's go and work with this, and make this a little bit nicer.
0:13 So we're going to use a partial, but we're going to actually render it directly right
0:17 here, for now, and then you'll see later that we're gonna use the render partial inside the page. So let's go and add a new HTML file, and we'll call
0:27 this search results and none of that applies. Remember, this is a partial response, so we don't need the HTML and the extends and all that.
0:36 In fact, there's a lot of design here and there's not very much value. So I'm just going to drop in something and show you real quick.
0:43 So we're going to pass over a list of videos called videos, and then we're going
0:48 to loop over each video, we're say how many results there were, and then we want to say for each video `v` we want to link to it over this way.
0:57 And I'm gonna show a picture of it, and then we're going to show some information about what is the title, the author, the number of views and so on.
1:06 We also want to get this partial, notice that we can use a partial within a partial, which is awesome. And that those can be at different locations.
1:18 So these search results are here, but we don't yet have a partials for this one So have partials, and these are the partials well that are shared.
1:27 That are going to be common across different places, and I actually want to change the
1:31 name a little bit. Let's call this _video_image, and I've been using the preceding underscore to say this is a shared thing.
1:39 That kind of shouldn't be used directly like I did with the layout. So I'll put it over there in the shared, we'll give it this name. Well,
1:45 let's add one more, Again, not basic HTML and I'll just paste something. Again, not super, super impressive. The amount of HTML here.
1:56 But there's a lot of places we want to just put the image of a YouTube video, and it has this funky format with this certain thing and so on.
2:04 So it'll be nice to have that there. So we're going to just pass along the video, the `v`, give it the variable video
2:11 over there and that should be good to go. All right. I think that this is ready. Now, what do we do with it?
2:18 This was the text that we sent over before. Let's go and do this. Let's extract this.
2:23 So what we want to do is we want to generate different variables or different HTML here so we're going to say flask.render_template.
2:31 We can give it a template path. Which one do we want to render, the videos? Look at that, partials.
2:39 And then what is in here search_results, and what does it need? It needs videos=vm.videos. I think that's all it needs. That will do it, actually.
2:51 So instead of just coming up with our contrived little HTML as text that we just
2:57 wrote as a string. We're actually going to go back to Flask and say render our partial right there and then just return that.
3:02 But only if it's an htmx request, otherwise render the entire page. Alright, let's try this. So here we are again, we're back at our page.
3:12 There's our results. Of course we want to empty that out and let's say apple again, wow, look at how slick that is.
3:22 What if we said Python? What if we said indycar or just indy, super, super neat the way this works. So it looks like our search is coming along
3:33 great. The only thing I didn't really love there, it was here that we actually had results when it was empty. So we can just put nothing.
3:42 Now we come in, and we type for Python. Boom! There's our answer. And look through those, those look like the right ones,
3:50 don't they? This definitely Python topics. And look, here's even the interview I did with Carson about htmx.
3:58 Hopefully you saw how easy that was and were again leveraging this concept of a partial view. So here we have a partial that we give a bunch of videos,
4:07 it does a bunch of stuff, and then it also leverages this partial video image thing
4:12 what you saw was fairly complicated and doesn't need to be thought about more than
4:16 once. So allows us to just treat the image based on what YouTube will give us back for the video Super,
4:22 super neat. We ended up with this, our active search is actually working.

Talk Python's Mastodon Michael Kennedy's Mastodon