htmx
htmx copied to clipboard
Published
20 hours ago •
bigskysoftware
bigskysoftware
`triggeringEvent` is undefined in `htmx:wsConfigSend`
Example page code:
<html data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="schorle-csrf-token" content="5a336cec-fe9b-4be8-b69f-4152c973c39a" />
<meta name="schorle-dev" content="true" />
<title>Schorle</title>
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/[email protected]" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="/_schorle/assets/bundle.js" crossorigin="anonymous"></script>
</head>
<body>
<footer id="schorle-footer"></footer>
<div id="schorle-morph-wrapper" hx-ext="morph">
<div id="schorle-event-handler" hx-ext="ws" ws-connect="/_schorle/events">
<div id="schorle-page" class="flex flex-col justify-center items-center h-screen w-screen" hx-swap-oob="morph" hx-trigger="load from:body" ws-send="">
<div id="schorle-div-4566769856" class="flex flex-row justify-center items-center w-6/12 space-x-4" hx-swap-oob="morph">
<input id="schorle-input-4565404704" class="input form-control" hx-swap-oob="morph" hx-include="this" placeholder="Enter text here" name="schorle-input-4565404704" type="text" hx-trigger="change" ws-send="" />
<button id="schorle-button-4565405584" class="btn-primary btn" hx-swap-oob="morph">Add</button>
</div>
<div id="schorle-div-4566770976" class="flex w-96 flex-col space-y-4 p-4" hx-swap-oob="morph" hx-trigger="loadstart" ws-send="" />
</div>
</div>
</div>
</body>
</html>
It's a bit verbose, the most important part here is the page section:
<div id="schorle-page" class="flex flex-col justify-center items-center h-screen w-screen" hx-swap-oob="morph" hx-trigger="load from:body" ws-send="">
I expect that it will send one message when the body element is loading.
In logs I see two of them, and both are fired before the body is loaded:
Moreover, these messages doesn't contain any trigger information. Any idea on why it happens?
- Double-check that the WebSocket message-sending logic is correctly bound to the desired event. If it's set to trigger on the "load" event, ensure that it's only happening once after the body is fully loaded.
- Verify the behavior of htmx and how it interacts with the hx-trigger attribute. There might be scenarios where htmx triggers the event unexpectedly, leading to multiple WebSocket messages being sent.
- Another reason can be, that maybe it is loading asynchronously, it's possible that the WebSocket connection is being established before the script has fully loaded.
