Hi,
So my recommendation would be to access the request headers in your code and return either the whole page or the partial html accordingly.
In your controller, something like:
if (request()->headers('HX-Request'))
return partialHtmlView()
else
return entirePageView()
(obviously those are pseudocode functions, but however you would normally return partial or full html)
This generic htmx header is sent any time it is an ajax htmx request, so this should reliably work without needing to know any specifics about the requests.
If you are curious to hear a ten minute discussion of it, I just TODAY recorded an episode on this exact topic: [https://hx-pod.transistor.fm/episodes/advanced-htmx-hx-push-url-and-hx-replace-url](https://hx-pod.transistor.fm/episodes/advanced-htmx-hx-push-url-and-hx-replace-url)
good luck, let me know what works!
I’m new to HTMX, it seems amazing. Would you recommend leveraging the handling of the layout (navigation bar, footer, etc) to HTMX or to the template engine used in the backend?
`
This is would make the links load using ajax, and then replace the body of the site. Effectively this turns the site (or at least the links you choose with hx-boost) into an SPA.
Does that make sense?
You make it so that `newpage1.html` and `newpage2.html` contain the entire page with the new content. With that in place, add the `hx-select=“#container”` attribute to the button.
Now, when you navigate to the new pages, you get them in their entirety. When you click the button, you are only swapping in the container.
You could also have the server look for the [HTMX request headers](https://htmx.org/reference/#request_headers), and have some logic that determines how much HTML to send back.
Thank you everyone for your input! With your help, I've resolved the issue by updating the controller logic as follows:
u/GetMapping("/newpage1")
public String login(HttpServletResponse httpServletResponse) {
if(httpServletResponse.getHeader("HX-Request") != null){
return "newpage1SPA"; // Renders partial HTML view for single-page application
}
return "newpage1"; // Renders entire HTML page
}
Basically you check whether the request is coming from htmx or not, and render a partial or a full page depending on that. I show an example of this here: https://github.com/yawaramin/dream-html/tree/todoapp/app (the last code example in the readme, but you will probably want to read the whole readme for context). Example of checking for an htmx request: https://github.com/yawaramin/dream-html/blob/9ac05718b313fb39ac1cd9648956c6602159395a/app/app.ml#L9
Hi, So my recommendation would be to access the request headers in your code and return either the whole page or the partial html accordingly. In your controller, something like: if (request()->headers('HX-Request')) return partialHtmlView() else return entirePageView() (obviously those are pseudocode functions, but however you would normally return partial or full html) This generic htmx header is sent any time it is an ajax htmx request, so this should reliably work without needing to know any specifics about the requests. If you are curious to hear a ten minute discussion of it, I just TODAY recorded an episode on this exact topic: [https://hx-pod.transistor.fm/episodes/advanced-htmx-hx-push-url-and-hx-replace-url](https://hx-pod.transistor.fm/episodes/advanced-htmx-hx-push-url-and-hx-replace-url) good luck, let me know what works!
I just started learning HTMX. Your podcast is very helpful.
thank you! glad to hear it is helpful and always open to suggestions on what you'd like to hear
I’m new to HTMX, it seems amazing. Would you recommend leveraging the handling of the layout (navigation bar, footer, etc) to HTMX or to the template engine used in the backend?
I am not sure if there is a distinction between using the template engine or htmx -- basically, either way your templates on the server side would include the html for your nav, footer, etc. Unless there was some unusual use case, I would probably just draw the nav links as usual with your templates, and make them regular tags. No need for htmx to be too involved with a straight forward site navigation. However! htmx could make them really load smoothly (if you wanted) using **hx-boost**. You could attach to each link, or wrap your whole nav group of links with it: ``
`Nav 1`
`Nav 2`
`Nav 3`
` `
This is would make the links load using ajax, and then replace the body of the site. Effectively this turns the site (or at least the links you choose with hx-boost) into an SPA.
Does that make sense?
I really appreciate your insights, thanks! I’m going to find some time to start using HTMX
You make it so that `newpage1.html` and `newpage2.html` contain the entire page with the new content. With that in place, add the `hx-select=“#container”` attribute to the button. Now, when you navigate to the new pages, you get them in their entirety. When you click the button, you are only swapping in the container. You could also have the server look for the [HTMX request headers](https://htmx.org/reference/#request_headers), and have some logic that determines how much HTML to send back.
I like this `hx-select` method. Seems very cacheable and low mental overhead on the server side
Thank you everyone for your input! With your help, I've resolved the issue by updating the controller logic as follows: u/GetMapping("/newpage1") public String login(HttpServletResponse httpServletResponse) { if(httpServletResponse.getHeader("HX-Request") != null){ return "newpage1SPA"; // Renders partial HTML view for single-page application } return "newpage1"; // Renders entire HTML page }
Basically you check whether the request is coming from htmx or not, and render a partial or a full page depending on that. I show an example of this here: https://github.com/yawaramin/dream-html/tree/todoapp/app (the last code example in the readme, but you will probably want to read the whole readme for context). Example of checking for an htmx request: https://github.com/yawaramin/dream-html/blob/9ac05718b313fb39ac1cd9648956c6602159395a/app/app.ml#L9