In the server, I work in Go (highly recommended) which has fantastic templates. But there are instances where Go templates are just too unwieldy. For instance, I hate rendering complex form widgets in Go templates. So I made a tiny library that lets me assemble them one bit at a time.

It’s a different look from mixt abut I think the inspiration comes from the same place.

i think with django templates, includes, and templatetags, it's well positioned to support htmx development

If I would replace content in the DOM outside of htmx... Do I have to load that in htmx somehow for it to recognize any htmx attributes etc?

I think you are looking for https://htmx.org/api/#process

Thanks

@User Will hx-swap="afterbegin" or hx-swap="beforeend" work with Websockets? I am getting error like

htmx:oobErrorNoTarget

in the console with the following code:

html
<div hx-ws="connect:/tweet" hx-swap="afterEnd" hx-swap-oob="#timeline">
<form hx-ws="send:submit">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="username" required="true">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Message:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" name="message" required="true"></textarea>
</div>
</div>
<div class="d-grid gap-2 col-3 mx-auto mb-3">
<button class="btn btn-primary text-center" type="submit">Tweet</button></div></form>
<div id="timeline"></div></div>

looking at the code, it looks like it treats all content as an out of band swap

so, according to the docs:

you can use

hx-oob-swap='afterEnd'

Got it, thanks I figured it out by sending the response from server with oob swap like this,

html
<div hx-swap-oob="afterbegin:#timeline">...</div>

It works now, but it is appending the response multiple times ( 3 times to be exact) I don't know this is a bug or not

I would guess it is getting multiple events

you can set a breakpoint in the code and see what's going on

Sure, let me debug and get back 👍

how do i achieve turbo(links)-like behaviours?: - body element is replaced by main endpoint on page load (via js) - all the links are only updating the body element (i.e. everything else is persistent) - body element gets replaced by whatever endpoint is being linked potential caveats: - inclusion of endpoint-specific js/css

Hello, (-> just starting with htmx <-) I have an action (hx-get) in a element of a table. This table shows various data about collected images and when I click any position in the the action opens a modal with a preview of the image. The last is a set of two buttons (edit, delete). When I click "Edit" , for a moment (before the redirect to editing page), the modal opens (fired by the action of course). My question is: is there a way to "disable" the action connected with the element just for my specific ? Thanks in advance for the help! Paolo

hx-boost is the closest

i believe inline CSS will work, but we will not pull out style or script links from the header and auto-insert it, as turbolinks does

can you post some example code?

well, let's say i have

select2

<script>

on

item

, i wouldn't really be including it globally since it's used only on one endpoint, not in the whole app, right?

right, but how do i trigger the change via js/jquery?

like, on page load

If the is inline:

html
<script>
  doSomeStuff();
</script>

then it will be executed. But not if it is

html
  <script src="..."></script>

Can you give me some example code from turbolinks?

i can give you one from turbo,

html
<turbo-frame id="messages" src="/messages">
  <p>This message will be replaced by the response from /messages.</p>
</turbo-frame>

as for triggering it via js it's done via stimulus and i don't really know how it works and their docs are poor

Well, something like that in htmx would be:

html
<div hx-trigger="doIt" id="messages" hx-get="/messages">
  <p>This message will be replaced by the response from /messages.</p>
</div

and then triggered via javascript like this:

javascript
  htxm.trigger("#messages", "doIt")

or, alternatively in hyperscript: