htmx
htmx copied to clipboard
[Q/feat] Async `htmx:confirm` -> `htmx:configRequest` data passing
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.