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

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