I'd appreciate any help, thanks!

I would use an

oob-swap

to return a message from the server, no need to mess around with events

Well, then is it possible to use multiple swaps on one element ? Because most of the elements that are concerned already have a hx-swap to them

Yes, using ~~`oob-swap`~~`swap-oob`.

The way I do status updates like this is I have an empty div on my page that I oob swap when there's a message to show

Oh alright, I'll check that out, thanks! Also, I used to try django's message frameworks for this, but it seemed not dynamic enough for the liking of my mentor as it needed the page to be refreshed to appear. Would you see a solution to this too by any chance ?

Oh alright! That was kinda what I was going for

Well, my mentor insists on using afterRequest, and it does seem coherent to the app we're building, so I'd actually still need help over that if anyone knows, thanks!

Tell your mentor to come in here and explain his reasoning

Because the whole point of html over the wire is to not have to deal with this sort of thing client-side

He's on vacation currently unfortunately, which is why I had to ask help elsewhere 😅

I mean, you can hook into the afterRequest event and do whatever you want in there, but that's gonna mean writing javascript. The great thing about htmx is that you generally don't need to write javascript

Well, let's put this aside, if I were to use oob-swap, how would you make sure the message appears after the request is successful ? And what if the request returns an error ?

Yeah it's probably unavoidable

The beauty of the oob swap is you don't need to worry about any of that. You make a request. The server replies with some HTML. htmx automatically parses that html, sees an element with

hx-swap-oob

and swaps it in place. Doesn't matter if it's an error message or a success message or a copy of the illustrated bible.

Your mentor should read up on the Principle of Least Power :]

I see, so I should just use hx-swap-oob="true:#requestresult" into my input element, is that how that works ?

No. You'd have an empty element (a div probably) somewhere with

hx-swap-oob="true" id="myStatusDiv"

. Then you make sure the server includes the message in a div with that id and and attribute, such as

html
<div id="myStatusDiv" hx-swap-oob="true" class="success">
We did the thing!
</div>

on success or

html
<div id="myStatusDiv" hx-swap-oob="true" class="error">
We couldn't do the thing!
</div>

Ohhhh, that looks so much easier than I thought it'd be

Alright I'll give it a try, thank you!

A common feeling when working with htmx

Haha I have to admit. I've been working with it for a month now and it really seems like a life saver sometimes 😅

Well I surely am missing something in my understanding of swap-oob, both the class success and error appear as soon as I load my page 🤔😅

To add my two pence, I use a Javascript library called SweetAlert2 (https://sweetalert2.github.io/) to do toast notifications and have those triggered on events sent by htmx. I originally did it with an empty div but wasn't too keen on it when sending multiple events in 1 page load (e.g. list of items and users clicked several buttons) as you either can't do multiple notifications if you're replacing your placeholder div, or you have to constantly append to it. It also restricts you on ONLY being able to show toasts/alerts when your server tells you to. A big thing I wanted to do was have the page load and then if the user loses internet connection and they click on an ajax'd button have a toast notification saying "something went wrong, check connection and retry later". Making the notifications triggered via JS is simpler because I can send a header back with a level (for colour) and message and there's a handler to display it, and if I have a htmx:timeout,senderror,sendabort I can also trigger a generic toast error

So, in the pattern I use and explained above, I have one empty div on the page. Then I have the server respond with the success or error div, which will swap the empty div. It looks like you just added both divs to the initial page?

We're not meant to be eliminating client side scripting otherwise there wouldn't be hyperscript...

Ohh, yeah I definitely misunderstood that, sorry!

That looks quite cool for other tasks we have to achieve too, I'll check it out aswell, thanks!

Anyway, gonna continue trying, thanks!

This is true enough. I like the oob swap pattern, even with all its limitations. I solved the multi-notification issue at one point by having a wrapper div and using

hx-swap-oob="beforeend"

. Sure enough it didn't handle connection issues very well, but I haven't had to worry too much about those yet. Related to this, the template tag idea described here sounds like it could facilitate this type of error message