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.

Talk Python's Mastodon Michael Kennedy's Mastodon