Preserving client side state, specifically details

[yatesco]

Hi - how should I go about preserving client side state between updates. Specifically whether a details element has been opened or not?

I can POST the data to the server but the details element is literally right next to a textarea whose mouseout event reiggers a POST/refresh, so there is a non-trivial likelihood that the user will change the open/close before the response comes back, which would be nasty.

Is there a more htmx/hyperscript way than simply capturing it via JS and then doing something on the relevant htmx refreshed event?

Thanks!

[David-Guillot]

Hi @yatesco , have you tried hx-preserve ?

[yatesco]

Thanks David, yes I looked at that, but I do actually want to replace the ‘details’ element.

…

Sent from my iPhone

On 12 Aug 2022, at 21:38, David Guillot ***@***.***> wrote:  Hi @yatesco , have you tried hx-preserve ? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[David-Guillot]

Ah yes... In this case it's a bit trickier. I have one more idea for you, but I haven't tested it. It would be to combine hx-preserve and hx-swap-oob to:

• Avoid replacing the <details>, in order to preserve its state
• But replace its contents as if it was out-of-band target

On server side, you'd have to:

• Wrap you details contents in some <div> which would hold the id that's required for hx-swap-oob
• Put the details contents at the root of the HTML fragment returned in case of htmx request

I hope this is clear enough...

[yatesco]

thanks David - I might give that a go.

[eduardofcgo]

I had a similar problem, my first solution was just as @yatesco described, but I later found it unnecessary complex.

I stopped using the details and used my own custom element. The details contents will be inside this element as well, but I created also an adicional element to hold the collapsed state. This element is the one tagged with hx-preserve. Because the preserved element is different from the actual contents, you can swap freely without disturbing the UI "state". Of course, the collapsed effect can be archived with a sibling CSS combinator rule according to this preserved state element.