HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Deep linking to search results
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Recall when we entered the URL
0:01
to go to the page, we didn't get any results.
0:05
So again, if we take this,
0:07
we close it, and we pull it back up, and we put it in the address
0:10
bar and go to it. It looks like there's nothing here.
0:13
But if we actually set a breakpoint over here or even if we just did a little
0:19
thing, let's just say print searching for, I don't know, vm.videos,
0:27
uh let's do search_text, that should have it,
0:34
actually. Let's see. If we go to the URL and hit it again,
0:39
got to the run page, searching for car.
0:43
This information is being passed over and the search is being run, this is actually not
0:46
even a server side problem per se.
0:48
It's just an HTML problem. We're not doing anything with the results on the initial
0:53
page load. Okay, well let's get to it.
0:56
We've got to fix this. So we only want to do this if search_text
1:03
has a value. Okay, we don't want to try to render results and say
1:07
there are zero results. I could do it,
1:09
it wouldn't crash, but it would be not good.
1:13
So we're gonna go down and say if it's the case that they're either already typed
1:17
something or in this situation, deep linking to something.
1:21
We want to basically do what we did up here.
1:24
But remember, the deep link, this is false.
1:27
This doesn't run, but we need to basically render that with those variables.
1:34
You know what? We've got this really amazing library that makes this super easy,
1:39
render_partial, that. Done. We're done except for that
1:46
we don't have the concept of a thing called VM that's it.
1:50
There's one other step up here and that is the value should be set.
1:55
Notice if we're over here, even when we're deep linking,
1:57
what we should see is the word,
1:59
we should see the word car appear here.
2:01
Right. It's odd that it doesn't. So what we've got to do is come over
2:06
here and put a little expression. We'll say it's nothing if not search_text but if
2:11
there is search_text, it's search_text.
2:15
We might be able to simplify this.
2:16
We could say search_text or that.
2:20
Let's try that one. Okay,
2:22
now let's try our deep linking again.
2:25
Oh my goodness, it totally worked.
2:29
That is so awesome. So all we had to do was, this bit, the information
2:34
is already being passed over. Why?
2:36
Because of our beautiful, beautiful view models. But we won't do anything with it.
2:41
We weren't repopulating our input with the value, and we weren't rendering the results. We were just
2:47
showing the blank page even if that data appeared.
2:50
So we're doing this in the situation where there is a deep link as well as
2:56
this, and then we're going to get the results here and jamming them into that section
3:01
in the case that we're doing a basic plain load and then typing in the input.
3:06
I think it's time for a round trip thing.
3:09
So we go here back to our beginning,
3:11
let's go do a search. It didn't crash.
3:14
Right? We added that stuff for the deep linking but when there's nothing,
3:17
all the default values and stuff seem to work.
3:19
So let's search for apple. There we go. In the history,
3:24
let's search for a car. Let's search for EV.
3:29
Actually, let's go back to car.
3:31
History is working. Let's take this and let's close it,
3:34
create a new window and paste it up here.
3:37
Still get exactly the same results.
3:39
Now we don't have one of those dumb SPA single page applications apps that has no
3:43
concept of URL's. No, this is perfect.
3:45
This is exactly what you would want.
3:48
It all runs locally and super fast with this htmx exchange with the server but it
3:53
also behaves just like you would expect for a web app. You can link to stuff in it. Love it.