yep, perfectly reasonable and a recommended approach

only sprinkle in htmx where it adds value

no need to rewrite everything just to get active search somewhere in your app

Yup let’s do it!

Ok, so I'm having trouble getting the history to work with my current project. The project has a sidebar navigation on one side of the page, and a chat, which is fetched from an external source on the pages initial load. The problem I'm having is whenever I'm trying to go back in history, the chat stops working at all, and before I upgraded to htmx 1.2 the navigation also lost its javascript functionalities. (some basic class toggles on nav button presses). After 1.2 the navi seems to work fine even after history load, but the chat goes still unresponsive until I refresh the whole page. Any ideas what could be the issue here?

Not sure how it interacts with history, but maybe try using the

hx-preserve

attribute for the chat container https://htmx.org/attributes/hx-preserve/

☝️

I have a feeling what is happening is that some javascript is being excluded during restore and so you are getting the DOM for the chat, but not the functionality

I think I tried that already, but I guess I'll give it another go

Yeah tried it and it still breaks on history-back

OK, next trick

where is the chat dialog rooted in the DOM?

its just a wild dom jungle inside body

nav, the middle content div and the chat"root" are all siblings

the middle div is only place where there is (and should be) any bigger changes to the content so we tried to work around the issue with

hx-history-elt

but since it loads the whole body snapshot it wouldn't work (it would load another instance of nav & chat inside the middle content lol)

hx-history-elt

should, in theory, filter out the nav & chat

but @User was having issues with this as well

how deep are you willing to get into the much with htmx code? I can help you fix this if you are willing to modify and debug it locally

well I really need to find at least some way to get it working, so sure lets try it

the logic here is:

get the history snapshot (with a hx-history-elt, this should be the inner HTML)

swap that inner HTML into the history element

if we don't have a local cache, make a request to the server

here we issue a GET for the same URL

if we had a miss

and here we try to pull the history element out of the page: