HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Concept: Is a request htmx originated?
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We saw that we need to treat the request differently if it's a direct browser initiated request or if it is an htmx
0:11
initiated request. Remember, if the browser is requesting it, it wants the entire page. But almost always if htmx is requesting it, it
0:19
wants just part of the page. So here's our search implementation that we made a decision. We want to show them the video/search.html result
0:30
if it's a full page request, either deep linking or just to show the original search page. But if it's an htmx request to the same location,
0:39
we want to render the partial search.html one. We can use this is_htmx_request property or field that we've added
0:47
to the view model. Where does that come from? We realized that htmx sets a header, so we just go to the headers and
0:56
we say do you have any sort of value for something called 'HX-Request'? because we don't really care what that value is.
1:03
If that header exists in the collection, htmx added that there for us to say hey, this is a request from us.
1:10
So if you need to behave differently for us rather than the regular web browser, this is your key to do so.
1:16
And that's how we made search work to render both deep linking as well as the regular response in just a couple lines of code.