OOB content removed from Boosted response #3312
-
|
I think I read somewhere (although I cannot find it now) that elements with hx-swap-oob attributes are removed from boosted content, i.e. when fetched with hx-boost="true". This certainly seems to be the case from my testing. Q1: is that true or did I hallucinate that fact ? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
I think that in fact hx-swap-oob content is processed fine with hx-boost'ed requests. But their is a major gotcha with it sorry. oob swaps are processed before the rest of the main partial response data. So when you response with a partial response to replace say a targeted form div any oob swap data in the same partial response will be processed first and swapped into various targeted locations in the page and finally the remaining content will be swapped in replacing the form. If you try and target an element inside the targeting form with one of your oob swaps then you will lose it as it will swap in first into the form and then the final response will overwrite the whole form at the end. So oob swaps always need to target things outside of the main swap location to be useful. Now with the default hx-boost behavior you are swapping a whole page response into the body of the page so there is normally no useful location to target the oob swaps too. You can I think manually retarget the hx-boost maybe to another main div somehow. But this is probably going against the grain a bit trying to work around this. With hx-boost you are simulating full page navigations and if you are responding with the full page template and not a partial then you are replacing the whole page contents and oob content should not be required because you can instead just target the content you want to the location you want by just updating your full page template to put it there directly. If you do want to do something like oob swaps to modify just some of the components after the full page response then I would look at adding elements with hx-trigger="load" that can be placed in the response and they will issue new sub requests to different routes to get partial responses and update sections like lazy loading. You could also look at https://htmx.org/headers/hx-trigger/ at the hx-trigger-after-swap which can allow you to respond with some trigger data with some sort of message or something that can perform a custom action. But these only work when making hx-boost or normal hx-requests and if the user pushes f5 or enters the url it will load the page using the browser and not htmx preventing these kinds of actions. |
Beta Was this translation helpful? Give feedback.
I think that in fact hx-swap-oob content is processed fine with hx-boost'ed requests. But their is a major gotcha with it sorry. oob swaps are processed before the rest of the main partial response data. So when you response with a partial response to replace say a targeted form div any oob swap data in the same partial response will be processed first and swapped into various targeted locations in the page and finally the remaining content will be swapped in replacing the form. If you try and target an element inside the targeting form with one of your oob swaps then you will lose it as it will swap in first into the form and then the final response will overwrite the whole form at the e…