Maybe this isn't even the best way

When you POST from htmx, you could just have your server set cookies for the response. Would that work well enough?

ahhh thats a good idea

Cool 😎

Can we get CodeSandbox examples in the htmx docs?

@User i don't see how to reproduce this. it seems to work as expected for me.

not really, considering you need a backend server to serve html responses to demo htmx functionalities.

I'm trying to get server sent events working with htmx and I thought I could just use the examples given in the docs but it 's not working. I see a "type: error" in the console and the readyState says "0". It just sits there and keeps trying to connect. Maybe I'm missing something. Do you have to actually write code yourself to start the connection or is the example in the docs all that's supposed to be needed to be done?

@User is the SSE expert

You rang?

but no, you don't need to do anything special

The docs example requires an SSE server to work.

Let me look at what it's doing, real quick to say more. But, here's a sample server you can run (if you can compile Go): https://github.com/benpate/sseplaceholder

Yeah, like a lot of the docs, the SSE examples are just showing a theoretical connection, but they would not work on their own. I hope that makes sense. Write back here (or PM me) and I'll dig in deeper with you 🙂

Hi all, I'm new here, just started learning about htmx and it feels really promising. Here's a tiny demo I made to start experimenting https://github.com/gcollazo/htmx-counter

Looks cool @User -- Keep up the good work!

Hi Can someone tell me how to execute a piece of javascript after a swap has been performed i.e. load an HTML5 dialog into the page and then call showModal on it? Do I need hyperscript to enable this? Thanks

Without having looked at anything, I would suggest you inspect the response you get from the server (using browser dev tools for example) to ensure the html being returned doesn’t contain the unwanted markup already. If that all looks good, then the htmx swap strategy could be looked at next, in conjunction with the swap target (implicit or hx-target), to figure out what’s going wrong. Remember there’s no magic really to htmx content swapping. In cases like these I invariably find the issue either in the markup I’m returning from the server, the htmx swap target or sometimes a JS widget library that I need to hook a refresh call into, or something similar

I'm sure CodeSandbox can handle server examples

Hi all. Is there a less bulky way of defining what data gets sent down a Websocket than using a ? In a lot of places I'm just sending a single known id, and having to make it a is rather bulky for what it is when I have a lot of them, e.g.

<form id="quote-word-{{.Id}}" hx-swap-oob="true" style="display: inline" hx-ws="send:submit" hx-trigger="click"><input name="toggle_word" type="hidden" value="{{.Id}}" />{{.DisplayText}}</form>

Thank you ❤️

Hi. Have you tried hx-vals? https://htmx.org/attributes/hx-vals/

Thank you, hx-vals means I don't need the hidden fields anymore 😄

Ah, also, I've completely misunderstood that hx-ws required a at all 🤦

Hey @elegant-raincoat-69176 one easy way is to use an event. Add the

hx-trigger

header to your response, and it will trigger your event on the page. You can add event handlers in plain JS (or hyperscript, if you’re daring)

Looks like it's not the returned code (it's a predefined template, and django's just filling in some variables). Just verified. Here's output for newly created task 16 (url: https://django-htmx-todo-list.omenapps.repl.co/task/16/) which was swapped into the table upon creation:

<tr hx-target="this" hx-swap="outerHTML">
        <td class="border-0" scope="row">
            <div class="form-row mb-3">
                <div class="col">
                    Task name: <b>Chips</b>
                </div>
                <div class="col">
                    <input class="form-check-input" type="checkbox" value="" id="checkboxIsDone" disabled >
                    <label class="form-check-label" for="checkboxIsDone">
                        Task is done
                    </label>
                </div>
                <div class="col">
                    <div class="row">
                        <button hx-get="/task/16/edit/" class="btn btn-primary btn-sm">
                        Edit
                        </button>
                        <form class="ml-2">
                            <input type="hidden" name="csrfmiddlewaretoken" value="5PUVnRniyvevRbJyTdaMgRhubypTBHJmWgXfiMUx890Q2C8T838gfcflo8hnjKq9">
                            <button class="btn btn-danger btn-sm" hx-post="/task/16/delete/" hx-confirm="Are you sure?">
                            Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </td>
    <tr>

But an extra empty tag was appended after it:

<tr class=""></tr>

I wonder if this could be a BootStrap thing 🤔 Anyway, thanks for the tips. I'll keep digging.

Oh, wow

I see the problem now 🤣

I didn't slash the ending

It all comes down to basic HTML 😅

Glad you found it 🙂 Like I said, it’s always something like that with me, I’ve stopped doubting Intercooler/htmx a long time ago when it comes to stuff like this 🙂