This is essentially the

hx-on

discussion—how to attach event listeners to DOM elements declaratively, and let HTML/X handle the "gc" of it all

I think we've got a contestant for book narrator once it's ready...

I’m no expert on that stack but my guess would be express not recognising put and delete methods. Checkout https://github.com/expressjs/method-override If that doesn’t help maybe you could post some more info about the issue.

i ve tried setting breakpoints in the unminified htmx.js but its too above my level to find out whats happening in there.

Its strange why out of the HX-Trigger header one event is being caught and event handler firing, but the other is not. Stumped.

I know this is a bit old, but the challenge with this is that

reveal

is getting triggered over and over again, even if the hidden trigger element isn't currently visible :/

That's... unexpected

Hmm, But it's only if change the element to be hidden and remove its background color. Which I know, is also unexpected. So this works:

class="absolute w-full h-[48rem] bottom-[2rem] text-white bg-red-500 pointer-events-none select-none"

But this triggered infinitely:

class="absolute w-full h-[48rem] bottom-[2rem] text-white hidden pointer-events-none select-none"

I'll do a few more tests because I'm going crazy.

Yes, absolutely crazy, replacing

bg-red-500

with

hidden

(display:none) causes htmx to keep triggering the

revealed

event.

I can probably set

opacity: 0

to get around this, but it's a little dirty.

background: transparent

?

Are you asking if the same happens with that? Or suggesting that as a solution?

As a solution

because

opacity: 0

should also work as a workaround

So, I don't know how you did it, but here is my idea

html
<script src="https://demo.htmx.org"></script>

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="trigger" hx-trigger="revealed" hx-get="/foo" hx-swap="outerHTML"></div>
</div>

<template url="/foo">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="trigger" hx-trigger="revealed" hx-get="/foo" hx-swap="outerHTML"></div>
</template>

css
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.item {
  background: purple;
  height: 100px;
}

.trigger {
  position: absolute;
  background: transparent;
  height: 300px;
  bottom: 0;
  right: 0;
  width: 10px;
}

And it seems to work as intended

The key element here is

.trigger

which is 1. Absolutely position to the side of the container, so it doesn't cover it, but scrolled together with the content 2. Placed as the last item of the container 3. Swapped with

outerHTML

, which removes this trigger, which is not needed and places content where we want it to be (at the end of the container)

I haven't tried to reproduce what you describe specifically, but this is my idea when I proposed this option

I'm implementing it a bit differently at the moment. Let me try to get closer to your implementation.

Yeah, your solution is novel and solves the issue of HTMX missing the reveal on a single item in the grid. Thanks. But what I find weird is why

display: none

on the triggering item makes it trigger without being revealed (it's not a big deal anyway)

Oh, hidden is display none in tailwind

When I tried to repro it, I couldn't, because I tried

visibility: hidden

now I see what you mean

yea, this is strange

Well, at least I know I'm not going crazy

Also with this one thing that's a bit bothersome is that the cache-busting query param I've set HTMX to auto-add is getting re-upended on each request:

/?page=3&org.htmx.cache-buster=true&org.htmx.cache-buster=true

Edit: Actually, it's only being appended twice. Not a big deal to me.

I’ll try this out. I guess I thought I wouldn’t need method-override. I figured HTMX would take care of that issue but I’ma try it and see what happens. If it doesn’t, I’ll post my code in here and see if anyone can help.

That might have been a bad link. htmx will for sure be sending those methods. Assume you're using express on the server and thought it might not be dealing with those methods as expected.

Yes I’m using express with on the server and using MongoDB as my database. I’m using mongoose to build my schemas.

Here's my routes. If anybody got tips or if I'm doing this wrong, I'd greatly appreciate it if feedback was provided. Thank you!!