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 to go to the page, we didn't get any results. So again, if we take this,
0:08
we close it, and we pull it back up, and we put it in the address bar and go to it. It looks like there's nothing here.
0:14
But if we actually set a breakpoint over here or even if we just did a little thing, let's just say print searching for, I don't know, vm.videos,
0:28
uh let's do search_text, that should have it, actually. Let's see. If we go to the URL and hit it again, got to the run page, searching for car.
0:44
This information is being passed over and the search is being run, this is actually not even a server side problem per se.
0:49
It's just an HTML problem. We're not doing anything with the results on the initial page load. Okay, well let's get to it.
0:57
We've got to fix this. So we only want to do this if search_text has a value. Okay, we don't want to try to render results and say
1:08
there are zero results. I could do it, it wouldn't crash, but it would be not good.
1:14
So we're gonna go down and say if it's the case that they're either already typed something or in this situation, deep linking to something.
1:22
We want to basically do what we did up here. But remember, the deep link, this is false.
1:28
This doesn't run, but we need to basically render that with those variables.
1:35
You know what? We've got this really amazing library that makes this super easy, render_partial, that. Done. We're done except for that
1:47
we don't have the concept of a thing called VM that's it. There's one other step up here and that is the value should be set.
1:56
Notice if we're over here, even when we're deep linking, what we should see is the word, we should see the word car appear here.
2:02
Right. It's odd that it doesn't. So what we've got to do is come over
2:07
here and put a little expression. We'll say it's nothing if not search_text but if there is search_text, it's search_text.
2:16
We might be able to simplify this. We could say search_text or that. Let's try that one. Okay, now let's try our deep linking again.
2:26
Oh my goodness, it totally worked. That is so awesome. So all we had to do was, this bit, the information is already being passed over. Why?
2:37
Because of our beautiful, beautiful view models. But we won't do anything with it.
2:42
We weren't repopulating our input with the value, and we weren't rendering the results. We were just showing the blank page even if that data appeared.
2:51
So we're doing this in the situation where there is a deep link as well as
2:57
this, and then we're going to get the results here and jamming them into that section
3:02
in the case that we're doing a basic plain load and then typing in the input. I think it's time for a round trip thing.
3:10
So we go here back to our beginning, let's go do a search. It didn't crash. Right? We added that stuff for the deep linking but when there's nothing,
3:18
all the default values and stuff seem to work. So let's search for apple. There we go. In the history, let's search for a car. Let's search for EV.
3:30
Actually, let's go back to car. History is working. Let's take this and let's close it, create a new window and paste it up here.
3:38
Still get exactly the same results. Now we don't have one of those dumb SPA single page applications apps that has no
3:44
concept of URL's. No, this is perfect. This is exactly what you would want.
3:49
It all runs locally and super fast with this htmx exchange with the server but it
3:54
also behaves just like you would expect for a web app. You can link to stuff in it. Love it.