Do you only want the behavior on certain pages?

yes correct

mmm

if it doesnt re-execute then when i return back to first-page the listeners wouldnt get re-init'd (in the case of non-global listeners)

you were right, head swapping is complicated 😂

mmm

Awesome! That is exactly what I was looking for. Thanks!

A co-worker told me about it and I tried it over Thanksgiving break. I am a Clojure developer and really like the idea of being able to do everything on the backend (esp. not having to write Javascript 🤮) and just use hypermedia. I'm only about a week in and am enjoying it immensely so far.

i wonder if 1cg has enough balls to actually extend html5 with a dtd

for the true htmx experience

apparently not

What is a good way to "stop" a trigger from happening? I have a

html
<tbody hx-get="{% url 'list' %}" 
       hx-target="#List" 
       hx-swap="outerHTML" 
       hx-trigger="every 30s">
...</tbody>

and in this table I can on click inline edit - but if I need longer than 30secs, I end up with the complete table again. Would be super smart to exclude the line I am working on from the swap, I know. But this sounds like it would blow up the whole logic. Is there a simpler way, for example to "stop" the trigger? With some JS (🤮 ) I could just delete the hx-trigger while an inline is open and add it afterwards. But is there a better way to do it?

Hi there, as I am copletelly new in HTMX (and have zero experience with JS) have question:

does hx-get support HTTP_PLAIN_AUTH ?

Have checked hx-headers but there is a JSON format prescripted

What I did was adding a little JS to test my approach: my

<tbody>

now looks like this:

html
<tbody id="listbody"
       hx-get="{% url 'list' %}" 
       hx-target="#List" 
       hx-swap="outerHTML" 
       hx-trigger="every 30s">
...</tbody>

and the edit button got a

onclick="toggleHxTrigger('False')

property.

js
function toggleHxTrigger (arg) {
    if (arg === "False") {
        document.getElementById("listbody").removeAttribute("hx-trigger");
    } else {
        document.getElementById("listbody").setAttribute("hx-trigger", "every 30s")
    }
};

But this does not interrupt the load, Altough I can see in the webdev console that the

hx-trigger

is not part of

tbody

anymore after clicking.

Yeah I was going to answer your previous message that this approach would not work. It's because htmx reads

hx-trigger

once and then launches a

setInterval()

. So you can't stop it without custom JS, and even that will be tricky to write, because you need the interval ID (cf https://developer.mozilla.org/en-US/docs/Web/API/setInterval), which is probably kept private by htmx.

damn 🙂

how would I then do it?

You can alway hook into htmx events. By cancelling the event when editor is active, you will cancel any further processing

If you feeling fancy, you can also use event filters https://htmx.org/attributes/hx-trigger/, but searching logic would not look nice in the attribute

every 1s [!document.querySelectorAll('.editor').length]

like that, but this is straight up ugly

I see something really weird here (https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L3079-L3082) if the server returns HTTP status code

286

(what is that?), a function named

cancelPolling

is called. Probably you can hook a tiny JS event listener when your editor opens to call that directly, passing the

<tbody>

as the parameter.

this does not look any nicer than @ripe-action-67367s proposal 😛 but i stumbled upon this too 🙂

How would I make this work? I have my

every 30s

in place, then click on edit: - line in the table gets swapped out - some JS adds a flag to my

hx-get

that indicates, the server should return a status code 286 - when edit line is closed remove that flag?

No actually this is not the best idea, as it will be very difficult to get the polling back when you finish the line edition. Clearly the event filter is the way to go.

mhm thats what I thought

actually the more I think of it, the more I like the approach.

Event filters are nice. I just don't like querySelector, since it only works from document, so you have to provide a fairly unique query for the edited row

On the other hand, benefits are quite significant, as you no longer need a separate handler on the rows