Directly in the returned html?

Is this a boosted link?

So right now i am just hx-boosting my content, its a monitoring page that connects to a few streams of data from an MQTT broker

Yeah

Can you move the js to the head?

In a boosted link it will swap the body but not the head

So if you put the js there it won't reload each transition

I suppose i could, but then its loaded in on every page, rather than just where i need it

You could update your js to take advantage the constant state

Make the first line checking for the presence of a variable and if it's there bail on the assumption you already defined it

i'll continue playing to see what i can find, the idea of checking seems fine, and actually putting it in the head isn't too bad with boosting i could just add a template block for the head and insert as and when i needed too

I have a html block and in I need to replace several blocks of content in it with the press of a single button without replacing the full html block, is this possible with htmx?

orange site weirdness.

yeah you just need to play with target/swap/oob to get the right combo for your case

https://htmx.org/attributes/hx-swap/ https://htmx.org/attributes/hx-target/ https://htmx.org/attributes/hx-swap-oob/

@gorgeous-ghost-95789 getting a little punchy on the ol bird

hey does the WS extension work with the client side templates extension?

I need to subscribe to a ws I don't control and it gives json back

relevant js:

javascript
        socket.addEventListener('message', function (event) {
            if (maybeCloseWebSocketSource(elt)) {
                return;
            }

            var response = event.data;
            api.withExtensions(elt, function(extension){
                response = extension.transformResponse(response, null, elt);
            });

            var settleInfo = api.makeSettleInfo(elt);
            var fragment = api.makeFragment(response);

            if (fragment.children.length) {
                for (var i = 0; i < fragment.children.length; i++) {
                    api.oobSwap(api.getAttributeValue(fragment.children[i], "hx-swap-oob") || "true", fragment.children[i], settleInfo);
                }
            }

            api.settleImmediately(settleInfo.tasks);
        });

Hey guys, I have a

<canvas>

blob that I want to upload in a

<input type=file>

. I figured out how to add the file by attaching to the submit handler, but how do I then submit the form via htmx? Like

form.send()

, but The Htmx Way?

Hey all, had a weird situation I could use some advice on, I've got a page with a lot of data lists (i.e. 8 per object with anywhere from 1 to 20 objects on the page) with a form input at the end of each list to add to the respective list. The page can be open by multiple people all updating the same data - the actual entries never changed (no editing at the moment), but data can be added or removed from any list. I tried doing a refresh on the whole page, but if someone was in the middle of type into one of the text boxes their text would be replaced. I could do something with swap-oob, but there's a huge number of possible lists (8x20) so I thought oob might be a bad idea. Are there any other suggestions/ideas?

FYI, it turned out to be a async/callback relate issue. HTMX/the browser would try to send the form while waiting. I solved it by replacing the async `canvas.toBob()`method with the sync

.toDataURL()

, and unwrapping the dataurl.

How are you handling the auto refresh? Polling from each list, just one poll, sse?

My approach would be: instead of replacing the content directly if it gets changed, add a little notification (e.g. "This list has changed. Click here to refresh."). Then, have a

hx-get

on the notification/link/button to reload the list on-demand, so the user can do it when they're ready.

trying to do something very specific: using the htmx response, to change the class of a block with a specific id, without changing the content inside the block, I'm sure it's something easy, but I'm having trouble finding the right way to do it.

use the ``HX-Trigger`` response header htmx.org/headers/hx-trigger/ to trigger an event, and have the block with the specific id listen for that event and then change it's class. if you don't need to change the content of the block I believe you can just use ``hx-swap="none"`` on the request

thanks @calm-ice-23682 !

the code exemples for hx-swap-oob and hx-preserve ar rather minimal, is there a way to look for more examples on how to use them correctly in html and response

I've been debating this, I was going to do each group of lists but that could create an unreasonable number of requests off every page so I was thinking about trying to refresh them all at once. When I first set it up I threw up my hands and didn't use htmx because the forced page refresh on an action helped with the refresh.