if they all update I suspect htmx is not set on the right elements/targets maybe talking with (pseudo)code will help? (btw English is not my primary language but I think City and Town should be Area and Town or State & Town?) I imagine something like this:

Both sound cool. No need for code. I can definitely figure it out on my own without much effort 🙂 I was asking more for.. ideas

Yea, i kinda messed up 'city' and 'town', should be 'area' or 'country' instead of 'city'. But ty anyway!

Is anyone able to help me with the HX-Location response header? I am probably doing something stupid here. This works:

return HttpResponse(status=204, headers={"HX-Location": "/portfolio/overview/0182727d-547a-7d85-858e-bdfc7512ca6b"})

This doesn't:

return HttpResponse(status=204, headers={"HX-Location": {"path":"/portfolio/overview/0182727d-547a-7d85-858e-bdfc7512ca6b","target":"#details-container"}})

Even if I exclude the target and just put the path in the second bit of code, it doesn't work. Thanks all

I should also add, the 204 status is used to hide a modal, that also stops working when I use the second bit of code. I can see the 204 response in the chrome inspection window though.

Can you also see the value of the header in your dev tools?

Yes, in the response headers I can see this:

Why is it single-quoted

I don't do django, can you return the entire value as a string? i.e.

"HX-Location": '{"path":"/.../", "target":"..."}'

Yes, that seems to have fixed the HX-Location issue. The modal closing is still not working in this single case, I will keep playing. Thanks @tall-dinner-62086

I don't know why a 204 would close a modal, or how

https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L3066 FYI, htmx interprets 204 as "do not swap"

@kind-kite-734 I don't know with Django, but when building

htmx-flask

, I created a helper to easily generate responses with htmx fields. I want the users to be able to pass a

dict

or a string for the location header, and for that to work I had to do this:

python
def _stringify(val):
    return val if isinstance(val, str) else json.dumps(val)

...

resp.headers["HX-Location"] = _stringify(location)

(where

location

can be a string or a dict)

in other words, you might need to `json.dumps`ify your dict, and set the header to that

same applies to other headers, see https://github.com/sponsfreixes/htmx-flask/blob/main/src/htmx_flask/response.py

@ancient-shoe-86801, yes you are correct. I used json.dumps and that is working great. Thanks for the help!

you are welcome! I guess writing a flask extension with tests served me to learn something, lol

Anyone know of a straightforward way to delay an OOB swap 1s after the initial response? Maybe not possible out of the box but I know there is a swap delay for regular swaps. Thanks!

Quick workaround is to just hide the element I’m swapping out of band and then use a little JavaScript to setTimeout to reveal it. Decent fix to my problem at least.

There's an

oobBeforeSwap

event which you could listen for and delay https://htmx.org/events/#htmx:oobBeforeSwap

That’s a good idea. Will test that out too.

Hi all, I've seen before that file downloads with htmx (or AJAX in general) aren't really possible. I have an endpoint returning a zip file (one-off, not stored in DB) using the

Content-Disposition

header. It seems that with htmx, I can swap in whatever content I want but the file download doesn't happen (expected), and without htmx the file download does occur but any other content I want to swap into the page obviously doesn't appear. Has anyone found a way of updating the current page and causing a file download using Django, or through any other relevant approaches?

you could do your swap with some content like "Download will start now" and then hook into the

afterSwap

event to set something like

window.location

to your download URL to start the download

i suppose it depends on exactly what your want the UI experience to look like

Hi, I'm getting an error using HTMX in Django with echarts. Follows the HTML that I'm using and the error: <div class="card" hx-get="{% url 'is3_indicador' %}" hx-target="#is3Chart" hx-swap="innerHTML" hx-trigger="load" hx-indicator="#is3Spinner"> IS3: Nível de escolaridade Loading... {% now "d/m/Y H:i" %} Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node 2 htmx.js:1730

is eCharts modifying the dom before the swap?

one thing to maybe try is removing the spinner for now

until we get it worked out

I'll try to remove the spinner and let you know. Thanks!

also (temporarily) switch to the non-minified verison of htmx so we can see exactly where the exception is happening