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: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.