htmx icon indicating copy to clipboard operation
htmx copied to clipboard

[Q/feat] Async `htmx:confirm` -> `htmx:configRequest` data passing

Open boyswan opened this issue 1 year ago • 1 comments

I'm struggling to find the idiomatic way of updating the configRequest asynchronously. The only approach I've found that works is the following:

document.body.addEventListener('htmx:confirm', async function (event) {
  event.preventDefault()

  if (event.detail.path == '/login') {
    let form = new FormData(event.detail.elt)
    let bearer = await get_bearer_token(form.get('email'), form.get('password'))
    event.detail.elt.bearer = bearer
  }

  event.detail.issueRequest()
})

Followed by:

document.body.addEventListener('htmx:configRequest', async (event) => {
  if (event.detail.elt.bearer) {
    event.detail.headers['Authorization'] = event.detail.elt.bearer
  }
})

It seems the only way I can persist data between these two events is by attaching it to detail.elt, which feels a little hacky. I noticed the etc field which in the docs is referred to as additional request information, but this is not available in htmx:confirm.

Is there a better way to achieve this? It seems all the parts are there but they don't quite work as expected. It feels like confirm and configRequest work independently, whilst I really want to be able to use them together. Perhaps if parameters were exposed in confirm and could be mutated, configRequest could make use of it.

boyswan avatar Nov 18 '23 23:11 boyswan