there is a pull request out for it, but I haven't accepted it yet

I'm still unsure how to best represent the whole "resource state" problem in htmx

that is, NOT_REQUESTED, LOADING, FAILED(error), SUCCESS(data)

specifically the failed case. In all the things i've done so far with htmx failure just means unresponsive unless i am catching something in the server and explicitly rendering error html or wtvr

its nowhere near a blocker for the work i do, just a thing

we trigger some events that you can handle: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L2920

I think I’m experiencing a different issue. Will upload a repro video in a bit.

does htmx work with control?

Define "works with". What do you want htmx to do with that input?

i replaced the datalist associated with the control but its values did not change

the time control

Hard for me to test that since firefox doesn't support datalists for time inputs

hmmm.. so it may be better to just use a dropdown list?

Testing with a text input, I can swap datalists on the fly and it works fine

try swapping the type to time and see if it works on whatever browser you're using that isn't firefox

Thank you.. Am investigating 👍

Your example works.. I guess I need to swap the outerHtml

I was only changing the innerHtml

no.. that is not it

innerHtml still works in your example

I was able to make it work.. My time format was missing the leading 0

HTMX is not particularly opinionated on error handling (which I think is something that it would be nice to build on, over time) but the way I've handled it is by including a small config file in my head template, right below where I import HTMX

js

document.addEventListener('DOMContentLoaded', function () {
  document.body.addEventListener('htmx:beforeSwap', function (evt) {
    const status = evt.detail.xhr.status
    if (status === 400 || status === 500) {
      // Stops the error from logging in the console
      evt.detail.isError = false

      // Create an error dialog box
      const errorDialog = document.createElement('div')
      errorDialog.classList.add('error-message')
      errorDialog.innerText = evt.detail.serverResponse
      errorDialog.setAttribute('onclick', 'this.remove()')

      // Get the nav and place the element after it
      const nav = document.querySelector('.site-nav')
      nav.insertAdjacentElement('afterend', errorDialog)
      errorDialog.scrollIntoView()
    }
  })
})

I think I adapted this from the documentation somewhere. There's some room for improvement (what if it errors twice?) but it's one basic way to hook in

So as I said I think I’m experiencing a different kind of bug. Repro video is up here: https://www.dropbox.com/s/tois6kye5nqr8dl/repro.mov?dl=0 As you can see I bring up a modal that is loaded via HTMX, when I click the “Apply” button, I admittedly do some HyperScript and htmx magic to update the page’s URL. So now a new grid is loaded via HTMX and I click a regular plain href link to go to another page, when I hit the back button, it seems that HTMX “remembers” that last request was made by it (?), and so the site is completely unstyled as you can see. As I said I have cacheSize set to 0, and it has always been like that on this machine. I’ve also tested this incognito. I mean, what could make the request still go through the history like that?

Hmmm, am looking for

refreshOnHistoryMiss=true

here? EDIT: Never mind, tried that, didn't work

It seems like Chrome wants to load the latest ("cached") response it got from the HTMX request, but that's a horrible idea in this case since that is only a partial response so it just fails...? really struggling to understand what's going on.

Maybe you are running into the

Vary

issue described here: https://htmx.org/docs/#caching

What response header should I use if I just want a full page refresh to another URL?

Nah, I'm sorry to waste everybody's time but this was the problem:

document.addEventListener("DOMContentLoaded", function (event) {
htmx.config.historyCacheSize = 0;
}

Apparently this sometimes might not run "...because the DOMContentLoaded event was already fired at this point." (source: https://stackoverflow.com/a/39993724/5013234)

Combination of

HX-Refresh

and

HX-Redirect

seems to work, but only if the status code is >=400

Hi, I found

keyup changed

does not work when used with a css selector like

keyup changed from:#something

or

keyup from:#something changed

(not sure which would actually by correct). It works when used like

keyup from:#something

though, that's strange. Another event that could be documented as alternative to

keyup changed

is

input

. 🙂 It fires when input changed. It also works when used like

input from:#something