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.