This may have the effect you’re after: https://gist.github.com/croxton/e2c33bd22591f9a5bd8c9d23a56c9edc

It doesn’t make much sense to embargo specific elements from history, because you would need to restore them on history restore with a server request anyway - so you might as well restore the entire page in one go.

Usually what you actually want is to have the initial un-manipulated dom state saved to history so your js can (re)initialise it properly.

The upcoming

hx-history=“false”

feature will prevent a page cache being saved to localStorage, but history state changes will still work as expected. It’s most useful for security reasons (preventing sensitive data being saved to the client which may be a public / shared machine).

@hundreds-cartoon-20446 that sounds perfect and I apologize, but as a noob to htmx, I am having a hard time getting it to work - any chance you can post an example of it used?

This is how to use extensions like the one I posted above: https://htmx.org/extensions/

To use it, you would add the attribute to elements you want to preserve the initial dom state across history restores:

<div
    hx-history-preserve
    hx-get="/somedata"
    hx-trigger="load">
</div>

Thanks, that looks like what I had done (added hx-ext="history-preserve" to a top level element, and then hx-history-preserve to the element with the load trigger), but the snapshot still displays data after initial page load. I will look more into it on my end, as im sure im doing something wrong. Appreciate the help!

You may need to disable the browser’s bfcache for html by sending a cache control header with your server responses:

"Cache-Control: no-cache, max-age=0, must-revalidate, no-store"

@hundreds-cartoon-20446 I have that as well - what I am finding is that htmx:beforeHistorySave and htmx:historyRestore are not firing (I log all the events in your extension code, onEvent method)

A history snapshot of the current page is taken when you load new content into the element you have marked as the history element - not on page load, which may seem counter intuitive. History restore is triggered when you hit the browser back / forward button to a previously loaded page.

You should see those events being triggered so I’m not sure why you’re not.

But in any case, since you seem to be trying to create SPA like behaviour you might find my starter kit helpful as it has a full example site: https://github.com/croxton/hda-starter-kit

Thanks that is very helpful, my issue was solved by placing the extension on the body, i had tried to place it on a parent element (but probably didn't put it high enough).

How can I use

hx-params

(and maybe hyperscript) to only submit form fields that have values in an

hx-get

situation? Since I'm using

hx-push-url="true"

, I'm getting empty URL params in the address bar that I'd like to remove if possible. The actual form is being submitted by hyperscript using

requestSubmit() the #form-id

I would use the

htmx:configRequest

event and remove the empty values from the

detail.parameters

object: https://htmx.org/events/#htmx:configRequest

Thanks!

Hi! I'd like to trigger "form submission" when changing any of

a

b

c

inputs.

html
<form hx-get="some/url">
  <label><input name="a" type="checkbox"> A</label>
  <label><input name="b" type="checkbox"> B</label>
  <label><input name="c" type="checkbox"> C</label>
</form>

is there a better way than do something like adding:

hx-get="some/url"

and

hx-include="input"

on all the inputs?

nevermind, nothing wrong with with just adding those attributes (and hx-target), the form tag becomes obsolete now though

you could also use hx-trigger with from:

I think you could also use hyperscript to trigger the call from the mutation of any of the inputs

@hundreds-cartoon-20446 In the hx-history-preserve extension, in "htmx:beforeSwap" event, the incoming DOM is ignored if there is no hx-history-elt element. Is it ok for there to be multiple hx-history-elt elements? For instance, each page in a spa could have its own hx-history-elt element. Here is the code I am referencing in your extension:

if (name === "htmx:beforeSwap") {
                // Take a snapshot of the initial dom state of a page before it is rendered.
                // This is called *before* htmx:beforeHistorySave, so we need to save the
                // snapshot for the *next* history save
                var incomingDOM = new DOMParser().parseFromString(event.detail.xhr.response, "text/html");
                var historyElt = incomingDOM.querySelector(historyEltSelector);
                console.log(historyElt)
                if (historyElt) {
                    historySnapshotNext = historyElt.innerHTML;
                }
            }

Hey, any recommendations for static analysis / types for HTML? E.g. when creating custom elements, how can I enforce correct use of them?

@hundreds-cartoon-20446 For the hx-history-preserve extension, is it intended that each page has its own hx-history-elt element if it would like to use hx-preserve? The reason I ask is because of this code block:

if (name === "htmx:beforeSwap") {
                // Take a snapshot of the initial dom state of a page before it is rendered.
                // This is called *before* htmx:beforeHistorySave, so we need to save the
                // snapshot for the *next* history save
                var incomingDOM = new DOMParser().parseFromString(event.detail.xhr.response, "text/html");
                var historyElt = incomingDOM.querySelector(historyEltSelector);
                if (historyElt) {
                    historySnapshotNext = historyElt.innerHTML;
                }
            }

In the beforeSwap event, it appears that the incoming DOM is ignored if there is no element with hx-history-elt. If each of my "pages" in a SPA (boosted links), have the hx-history-elt element, then everything works with hx-history-preserve. If a page does not have the hx-history-elt element, then hx-history-preserve doesn't work. Previously, I had always had boosted links replace the inner html a top level div that had hx-history-elt defined. I had never used multiple hx-history-elt directives, so I want to make sure I am not somehow using the extension in a way you hadn't intended.

Hi everyone! I'm using ajquery datatable and I'm sending data with AJAX from Django. I'm trying to use htmx in some spans that are in a column of the table, but it's not working when I clicked, The console not print any error and network not send any data. The htmx is running correctly everywhere else, except when it's inside the table. Do you know what might be causing this issue? Any help would be greatly appreciated! Thank you!

<td><div class="actions" style="margin: auto">
    <span class="material-icons">print</span>
    <span hx-get="/" hx-trigger="click" class="material-icons">create</span>
</div>
</td>

Are you sure that the element is being clicked? For instance, add an on click handler that prints to the console so you can be sure you arent actually clicking on another element. Just a guess, in case it is not htmx related

Yes, I add a addEventListener and work correctly

In case you’ve not already checked this: is that the actual HTML delivered to the browser? To make sure it’s not getting mangled by something else?

Yes, I taked the code from browser

I’d try putting the hx attributes on the td and see if it fires (basically cutting out the div, span and all the css)