A few questions about the websocket extension: - Any reason I'm not able to connect when I put

hx-ext="ws" ws-connect="/"

directly on the

body

element? Putting it on a div inside of body did help. - I thought the item we're replacing has to be enclosed inside the item that has those HTML (

hx-ext="ws"...

) attrs, but I was able to replace an item outside of it, which is solved the above issue....?

Ah, perhaps because my body already has

hx-ext="debug"

?

I think the position of ws-connect only matters if you have several ws connections, because ws-send sends the message to the closest parent element "containing" a ws connection As per doc > ws-send - Sends a message to the nearest websocket based on the trigger value for the element > […] > In the example above, the form uses the ws-send attribute to indicate that when it is submitted, the form values should be serialized as JSON and send to the nearest enclosing WebSocket, in this case the /chatroom endpoint. Otherwise the response is all out of bounds swaps that can go wherever the element's ID points them to, there is no bounds checking there I'm afraid > Content that is sent down from the websocket will be parsed as HTML and swapped in by the id property, using the same logic as Out of Band Swaps.

If you want multiple extensions on the same element, use hx-ext="debug,ws"

The location of element being replaced does not matter. ws messages are processed as OOB swaps which means you can target any element on the page, as you would with normal OOB response. What matters are the elements that send messages, like forms and buttons with ws-send. They must be enclosed in ws-connect element, and they will use the closest parent with this attribute

Helpful and clear as always, thanks!

hey y'all, simple question: is it possible to get a hx-redirect to open in a new tab ?

@ripe-action-67367 Hi. I've done my work with

hx-swap-oob="true"

as you have suggested and it works great for deletion. The problem I have is when I want to append/prepend element to some other selector. I use

hx-swap-oob="afterend:#selector"

, but it replaces innerHTML instead of outerHTML. So this means that I have to wrap it in some , is that correct? Is there a way to specify like

hx-swap-oob="afterend:outerHTML:#selector"

?

Basically, yes https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L727-L729. Not sure if a template tag will work, but a simple div should certainly suffice

Thanks 🙏

@ripe-action-67367 I've tried that, it kinda breaks now. My response looks like this:

<div hx-swap-oob="afterend:#t0">
    <tr id="..">
        <td>internals of cells from response</td>
        <td>internals of cells from response</td>
    </tr>
</div>
response body goes on ...

And in the page there is:

<table>
    <tbody>
        <tr id="t0"></tr>
        ... the rest of the rows
    </tbody>
</table>>

So after swap it looks like:

<table>
    <tbody>
        <tr id="t0"></tr>
        <td>internals of cells from response</td>
        <td>internals of cells from response</td>
        ... the rest of the rows
    </tbody>
</table>>

ooof, you got tables

yeeeaaaa, this is problematic

I really need this. In the past I was re-rendering the full tbody, but now I'm in optimization phase before shipping v1. And I need this to be fast, cannot afford rendering full body

did you try template tag?

Yes, with template just nothing happens

No swap performed at all

Just a second

Okay

I think I got something

Wrap your row in the response in tbody like so

html
<tbody hx-swap-oob="afterend:#row1">
    <tr id="row2">
        <td>internals of cells from response</td>
        <td>internals of cells from response</td>
    </tr>
  </tbody>

this is so dumb, but table parsing in html is so fragile, I actually can't believe this works

@ripe-action-67367 oh my god, you are Genius! It works. I owe you now

@ripe-action-67367 send me your USDT, I will send you my thank you

https://www.robinwieruch.de/web-development-trends/ mentions htmx at the very end.

I can get

hx-target

element in afterSwap event from

evt.detail.target

. But, if I change the target in beforeSwap event like

evt.detail.target = htmx.find("#result_1");

then I don't get the new target in afterSwap from

evt.detail.target

I have tried adding a beforeSwap listener in the hope that I would see when a swap was about to occur as a result of a server sent event using sse extension. The listener is not triggered. Is there a way to do this? What I was hoping to do is accept some JSON as a sse event and process the JSON rather than just do a swap.

opinions?