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.