hx-swap is not applied when response is 204 No Content

[ia3andy]

While trying to reproduce https://htmx.org/examples/delete-row/ in my app, I struggled a bit since it wasn't swapping on my DELETE response (204 No Content).
The example says:

Each row has a button with a hx-delete attribute containing the url on which to issue a DELETE request to delete the row from the server. This request responds with empty content, indicating that the row should be replaced with nothing.

Until I found that answering a 200 with an empty string was doing the job.

It seems to me that "204 No Content" is a much cleaner way to return an empty content and should have the same behavior as 200 with an empty string when used with hx-swap.

[ia3andy]

I found this note in the code while trying to provide a PR for this:

https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L3062-L3065

by default htmx only swaps on 200 return codes and does not swap on 204 'No Content'
this can be ovverriden by responding to the htmx:beforeSwap event and
overriding the detail.shouldSwap property

But it seems to me that an explicit mention of hx-swap should also be processed on 204 'No Content', another option would be to allow swap on `204 'No Content' but only for POST, PUT, DELETE which are more subject to this kind of usage.

[alexpetros]

I came here to create the same issue, with exactly the same use-case. At the very least I think it would be good idea to add a note to the documentation (and the delete row example that a 200 OK response with an empty body is required, and that a 204 NO CONTENT.

That having been said, a 204 is arguably the idiomatic response to a DELETE if "the action has been enacted and no further information is to be supplied". To me reads like a scenario where the frontend should respond by removing the item (since the action has been "enacted"). Maybe we could at least add an attribute option to enable this behavior? Happy to submit a PR too.

[1cg]

This is an ongoing saga, but the MDN resource says this about 204 - No Content:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204

The HTTP 204 No Content success status response code indicates that a request has succeeded, but that the client doesn't need to navigate away from its current page.

In htmx terms this means "do nothing", so the current default behavior is appropriate. However, you can adjust this behavior if you want by using the htmx:beforeSwap event:

https://htmx.org/docs/#modifying_swapping_behavior_with_events

[nat-418]

This is an ongoing saga, but the MDN resource says this about 204 - No Content:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204

The HTTP 204 No Content success status response code indicates that a request has succeeded, but that the client doesn't need to navigate away from its current page.

In htmx terms this means "do nothing", so the current default behavior is appropriate. However, you can adjust this behavior if you want by using the htmx:beforeSwap event:

https://htmx.org/docs/#modifying_swapping_behavior_with_events

I don't understand why this means "do nothing" to htmx. Can you explain the rationale?

[andryyy]

Better you tell us what you didn’t fully understand.

[nat-418]

Better you tell us what you didn’t fully understand.

After reading this quote:

The HTTP 204 No Content success status response code indicates that a request has succeeded, but that the client doesn't need to navigate away from its current page.

it seems to me that htmx might want to take some action upon successful response without navigating away from the current page. For example, to delete a DOM node that represents the deleted resource. So I don't understand why for htmx it is good to "do nothing".

[andryyy]

Ahh. :)

I usually do a 204 when I want to trigger an event via response header. This can also be used to delete content.

Another approach could be a route that returns content X but depending on the requests has a status code 200 or 204.

[ia3andy]

Ahh. :)

I usually do a 204 when I want to trigger an event via response header. This can also be used to delete content.

Another approach could be a route that returns content X but depending on the requests has a status code 200 or 204.

I agree with @nat-418 on this. Returning 204 should work out of the box for hx-swap.

[1cg]

but that the client doesn't need to navigate away from its current page.

I interpret this, in normal HTML, as meaning "Do nothing to the current page" not as "replace the current page with nothing."

htmx takes this interpretation to the partial level: "do nothing with the currently targeted element".

If you wish to replace the current element with nothing, you can return a 204 with an empty body.

I admit there is some ambiguity in the language here, but I think the current htmx interpretation of the response code is reasonable.

[1cg]

I should also note that this behavior can be overridden by catching the htmx:beforeSwap event and setting detail.shoudlSwap to true for 204 responses:

https://htmx.org/events/#htmx:beforeSwap

https://htmx.org/docs/#modifying_swapping_behavior_with_events

so you can make htmx behave however you'd like with respect to this response code.

[tdb-alcorn]

Came here to say I ran into this issue as well and my expectation was that an element with hx-swap: delete would delete itself when it gets a 204 with no content. I can see this is configurable but IMO the right default behavior is for 204 to trigger swaps out of the box.

[Markyiptw]

Interestingly I come accross this thread by searching on "how do I give an htmx response that tells the client not to swap", and glad that htmx just does that by default with an empty 204 response.

I understand the difference between 204 and 200 as something like a null and empty string.

Just say that to bring some different perspective to the discussion.

[nitsujri]

The current functionality is correct based on the docs:

a 204 No Content response indicates to the browser that the editor should not be replaced by other content.

In both delete and put, by default, the browser should do nothing, so HTMX's no swap is the correct method.