are you using flash message for the notification?

yes

I do something similar with django's flash messages but that uses a middleware and I'm not sure if adonis has the same concept

it does

https://github.com/Lightmatter/generic-django-conf/blob/3.0/%7B%7Bcookiecutter.repo_name%7D%7D/%7B%7Bcookiecutter.repo_name%7D%7D/templates/util/messages.html https://github.com/Lightmatter/generic-django-conf/blob/3.0/%7B%7Bcookiecutter.repo_name%7D%7D/%7B%7Bcookiecutter.repo_name%7D%7D/util/middleware.py#L5-L24

is how I do it w/ django

ok, that makes total sense. So basically, the middleware takes all flash messages renders that into html then appends it to the outgoing html, then htmx would pluck those and push it into div(#messages) element due to hx-swap-oob

yeah exactly

the only trick is the the messages will pile up as you take more actions

so you need to either dismiss w/ time or through a click event

or clear the messages div as js action when getting the response

great thank you very much. I won't really have that problem because I only display one message which means outerHTML would be my option just replace the entire div. I also I have hyperscript to close it on timeout

ah actually the other trick is that oob needs to be top level

don't forget that

that's bitten me a couple times

yeah replacing the whole div would work too!

top level in this case means it has to be above the request source in the dom right? because the example here seems to suggest such

top level meaning that the returned html needs to have multiple nodes at the highest level

eg

oh ok. That makes sense

normal content message

@hundreds-camera-24900 thank you very much. it worked flawlessly

🙌

Curious to hear what htmx users like for a multi-select UX. Requirements are: filter options by typing (assume a long list), enter to select topmost filtered option, select multiple in a row. Options I see: - Use zero-dependency vanilla JS implementation like https://github.com/Choices-js/Choices or https://github.com/orchidjs/tom-select, and just let this be a little island of JS outside the serverside htmx model. At the end of the day it just results in an input with filled values. - Use checkboxes. These dynamic multi-selects are essentially a better UX for checkboxes, when you have a very long list of options. This could be augmented with a filter input, with the dynamic filtering implemented in htmx. 2nd choice seems more htmx/html in spirit, but would be more work to implement, especially getting the UX, event processing, etc right. Any opinions? Other options to consider?

I believe you can do most, if not all, of this with hyperscript. hyperscript's main selling point for me is that it works really well with htmx (same creator). I would also recommend Alpine.js, which would also help you add those features you listed. Alpine is more mature, but I found there was some friction when trying to use it with htmx, compared to hyperscript. I also think those js libraries you listed could be a good option. htmx can trigger and/or be triggered by events to "talk" to the js libraries and you should be able to use them with no issue.

I like #1. So long as your synchronization with the server remains via hypermedia you are in the spirit of htmx. Scripting is an explicit part of the REST architecture, for extending client side capabilities.

A good js library that extends client side functionality but uses the appropriate dom elements (and fires good events) should work great with htmx.

> I would also recommend Alpine.js I'd be curious to hear what @mysterious-toddler-20573 thinks, but to my mind Alpine breaks the fundamental model of htmx, and belongs in the same general "camp" as react and friends. Even though it's a more streamlined, lightweight version, it still takes the stateful approach of using a client side data model to drive DOM changes. It bears surface similarity to htmx in that it uses custom html properties, but in the case of Alpine those properties are essentially mini

<script>

tags with a simple custom scripting language.

I am pragmatic about it: there are times a reactive model is a better approach to things. For stuff like toggling a class on a div, alpine is better than many other options because it has Locality of Behavior.