I'm having trouble with the websocket extension. When I use the depricated method I can see that the socket connection is set up (the correct Flask route is called, and the Network tab in the browsers shows the websocket). But if I refactor everything into using the (new) extension, nothing happens. Worse yet, submitting the form that is set to ws-send will reload the page. (I think this issue was discovered already, but the fix is not in the latest release?) I'd use the old method, but I'd really like to use hx-trigger on the form buttons so I can send data over the socket on mousedown and mouseup separately. Code I'm using:

<div hx-ws="connect:/plugins/stream/builtin.motion">
     <form hx-ws="send">
      <input id="left" type="submit" name="left-down" value="X" hx-swap="outerHTML">
      </form>
 </div>

vs

<div hx-ext="ws" ws-connect="ws://localhost:5000/plugins/stream/builtin.motion">
    <form ws-send="">
    <input id="left" type="submit" name="left-down" value="X" hx-swap="outerHTML">
    </form>
</div>

How do i add a body payload to a htmx post request?

The body payload is json in a separate textarea

I tried to use hx-include but the json string is then prefixed and url encoded, which i don’t want

Is there no way to do: hx-body=“#textareaJSON” ?

Are there any messages in the console? Did you include ws extension script?

The documentation doesn't seem to mention having to include a separate script

https://htmx.org/extensions/#using > Using an extension involves two steps: > > include the extension definition, which will add it to the htmx extension registry > reference the extension via the hx-ext attribute

For the websockets the CDN link would be https://unpkg.com/htmx.org/dist/ext/ws.js

thanks, that seems to solve the issue with creating the websocket. Now to make it not reload the page when I press a button 😉

I have updated my comments in issue. in brief I did not include hyperscript js as I did not see it mentioned anywhere on example page. on including the Close button functions. issue now I have is on sending back dialog modal partial the row still gets deleted not sure how to prevent that.

welp, using https://github.com/bigskysoftware/htmx/commit/8bb0399052f5a52a49e9e4f0f9624d25f1c2e890 I can make it work with a text field, but not with buttons it seems

after some more sleuthing it seems that the value of the button isn't sent along with the headers (but it is for the text field)

hx-include seems to be ignored as well when added to a or

https://github.com/bigskysoftware/htmx/blob/299a9baa1df31bcee78f52677c4444095b5b3db2/src/htmx.js#L1987 this is sorta intentional

Hx-vals should work

I'm trying out hyperscript and htmx. Got stuck on trying one thing. I'm building html dialog with a CANCEL and OK button. So if I delete something the modal will first ask are you sure. I am hx-delete and in _= i can doe beforeRequest but I'm breaking my head how I can tell hyperscript to wait on the answer either cancel the request or continue the request. Does somebody have an example the ones on htmx are only one OK button

trigger events w/ the confirm dialog: https://htmx.org/examples/confirm/

have htmx listen for the confirmation event

sorry for being so stupid. But I still don't get it: hx-action="click" hx-delete="{% url "checklist:delete_check" item.id %}" hx-swap="outerHTML" hx-target="#check-{{ item.id }}" _="on htmx:beforeRequest call dialog({title: 'Delete?', message: 'Are you sure you want to delete this item?'}) if dialog.result then WHAT SHOULD BE HERE?

you want to make hx-action something like

confirmed

and then have the hyperscript handle the click:

ah

(not sure what the dialog() api is, just guessing here)

sorry, not

hx-action

dialog is custom js for retrieving the button action

basically you want some hyperscript to run on click, call the confirmation dialog logic, and, if it's confirmed, trigger the

confirmed

event on the element, which will put htmx into action

so it's inverting the control to start in hyperscript, rather than trying to catch it in the htmx life cycle