HTMX history and the back button

Mikes Notes

I have been building a ribbon UI component and experimenting with different ways to do this. You can go and try them out.

• Version 1 (Uses CSS, tabs not stable)
• Version 2 (Uses HTMX)
• Version 3 (Uses CSS and HTMX; tabs not stable)
• Version 4 (Uses CSS and HTMX, tabs stable and back button works)

Version 4 seems to be OK.

To get the browser back button to work, I added the meta HTML code below

Resources

• https://ajabbi.com/eng/reference/design-system/components/ribbon-test1.html
• https://ajabbi.com/eng/reference/design-system/components/ribbon-test2.html
• https://ajabbi.com/eng/reference/design-system/components/ribbon-test3.html
• https://ajabbi.com/eng/reference/design-system/components/ribbon-test4.html
• https://stackoverflow.com/questions/72478010/htmx-disable-saving-snapshot-of-the-dom-with-hx-push-url-true

Code

<meta name="htmx-config" content='{"refreshOnHistoryMiss":"true"}' />