<newbie> Communicate only with nearest ancestor

[yatesco]

(Hi there - I'm just picking this up so I'm almost certainly doing something wrong, in which case please tell me the more idiomatic approach. I'm not wedded to my current approach at all)

I have an app which can have a stack of windows on top of each other (don't ask why - just accept this part please). Each window has a close button which should close that window, i.e. the nearest div.window in the ancestor tree. It has to be the nearest because there might be other ancestors who are also windows, which shouldn't be closed:

<div class="window1">
  <div class="window2">
   ...
   <button>to close window2</button>
  </div> -- window2  

  <button>to close window1</button>
</div> -- window1

clicking the button for window2 should only close window2 and not window1. Also note that in real life the window won't be the immediate parent of the button, it is a few ancestors up.

Approaches I might try without htmx:

• use a css selector to find the nearest ancestor and close it
• generate a random ID for each window
• shout at the UI team for allowing nested modals ;-)

I like the approach in https://htmx.org/examples/modal-custom/ which basically has the button fire an event which the window div listens to, but how do I restrict the parent window divs from listening?

I hope that makes sense - thanks for any/all suggestions

[David-Guillot]

Hi @yatesco ,

Normally I would say that your question is a bit of htmx's scope, because it implies Javascript for pure-client-side interaction (closing a modal), and htmx is about client-server communication and managing application state through HTML's hypertext superpowers. This is why the example you provide uses hyperscript (the _="on click trigger closeModal" part of the "close" button of the modal).

So normally my answer would be "just plug in some JS logic in there, like the example does, but a bit smarter, maybe with your idea of a random ID for each window, which could be generated on server-side and thus injected in the HTML via a data-attribute", etc.

But I've come with a hacky thing not so long ago using htmx, exactly for this use-case (I have no nested modals because my design team rocks 😄, but it also works when you have only one), with zero custom JS involved:

1. Create a backend endpoint that returns empty HTML (literally, a 200 response with an empty string as content)
2. Make your "Close" button trigger an htmx call to that endpoint and swap the content to closest div.window (yes, hx-target has a closest filter that does exactly what you want)

What do you think?

[yatesco]

this really helps clarify my thinking about the responsibilities of each tool - thank you. And I envy you your design team ;-)