see, I knew an escape hatch would appear, it always does, and it's usually deniz's work

Does anyone have an example or reference on using the hx-sse stuff? I'm struggling on the implementation.

This is an example with a Java backend: https://github.com/wimdeblauwe/blog-example-code/tree/feature/htmx-sse/htmx-sse

Thanks I'll check that out. I think I'll stick with polling for now 😄

@User To illustrate what I was saying before, here is an example of the website (my own) that I'm currently working on. the first part illustrates what works (thanks to your advice). And the second part illustrates what goes wrong (when the same animation is triggered twice or more in sequence).

Guys, I think I might be missing something (especially coming from Intercooler): in intercooler we had an

ic-on-success

attribute that you could use to trigger client-side stuff on a successful ajax request (post/get/whatever). What we've been doing thus far with htmx is to use hyperscript to list for the htmx:afterRequest event and then check if the

xhr.status == 200

. This leads to lots of hyperscript attributes that look like this:

_="on htmx:afterRequest(xhr) if xhr.status == 200 then ... else ..."

This seem unnecessarily clunky in my mind. I guess what I'm after is an htmx event that gets fired during the ajax response processing cycle, which already does the

xhr.status == 200

check (or I guess technically

xhr.status >= 200 && xhr.status < 400

) ... is there such an event or am I just being blind? If not, do you think it makes sense to add such an event?

And I guess the flipside of that event (i.e. the

ic-on-error

equivalent) couldn't hurt either.. 'cause it's not obvious to me that a direct equivalent htmx event exists for that either?

i'm fine w/ resurrecting that as an event (and potentially as attributes, maybe via an enhancement?)

I'd just be happy with an event, 'cause we hyperscript all the client-side things now 😁 If other folks would prefer attributes.. sure. I would just watch that slippery slope towards starting to include client-sidey attributes again (I honestly don't miss

ic-action

)

want to spec it out in a gist?

I'd have to see where the best spot is to insert the event trigger...I'm guessing at the start of the

handleAjaxResponse

function?

we currently trigger an event when a server-side error code is returned here: https://github.com/bigskysoftware/htmx/blob/2d9c49a8a179cbe028a0da2ccf5db3c2bf7fc641/src/htmx.js#L2620 but we could get more elaborate I think what i'd like to see is just your use of events, rather than a particular implementation, so we can be sure to get the user facing api right

@User ☝️

Ah! @User no I think

htmx:responseError

is perfect. Thanks! I reckon just an equivalent "success" event (perhaps

htmx:responseSuccess

?) will do the trick. We want to get it regardless of swapping.. i.e. triggered probably before the swap processing starts

As for the use of events.. it's like I said before, we often want to trigger client-side success/error (hyperscript) handling post-request. So typically I guess something like this would be great:

_="on htmx:responseSuccess doSomeSuccessfulThing() end on htmx:responseError handleTheError() end on htmx:afterRequest doSomeStuffRegardlessOfSuccessOrError()"

Does that make sense? @User ☝️

Feel free to call me out by saying that this might be a perfectly reasonable alternative (which is more or less what we've been doing anyway, it just seems a little icky to have to deal with response codes directly):

_="on htmx:afterRequest(xhr) doSomeStuffRegardlessOfSuccessOrError() then if xhr.status == 200 doSomeSuccessfulThing() else handleTheError()"

Oh crap... looking at my own example again now.. I just realised that listening for the multiple distinct events is gonna attached 3 event handlers.. whether the last example will only attach one 🙈

Response Handling Brainstorming

Is it possible to use the bread crumbs click and toggle the

active

class of another set of elements somewhere else in the DOM? The example you provided is great but I have both a side nav and a breadcrumb nav and they both need to be in sync.

I have the following but I am sure I am missing something...

html
<div id="breadcrumbs" 
  class="-intro-x breadcrumb mr-auto hidden sm:flex"
  _="on click take .{'side-menu--active'} from <a/> in #side-menu for me@data-target">
  <a hx-get="{% url 'landing-page' %}"
    hx-target="#viewport"
    hx-swap="innerHTML"
    hx-push-url="true"
    hx-indicator="#content-loader"
    class="cursor-pointer"
    data-target="#dashboard"
  >
    Application
  </a>
...
</div>

I am trying to use

data-target

as a dynamic target in my side menu.

I am sure I am doing the syntax wrong.....

What are you using for the page transition? I'd like to use that for a website of mine as well.

you probably want something like this:

on click 
   take .{'side-menu--active'} 
     from <a/> in #side-menu 
     for #{@data-target}

as you have it, you are asking hyperscript to set the class on a string value 🙂

(also set data-target to just "dashboard")

if you want to look something up by id dynamically,

#{}

is the way to go

also feel like I should recommend expanding the target again, as it will simplify life mightily 🙂

I tried what you have and it removes the old target but it never assigns from the

data-target

attribute? Is there something else I need?

Okay, so the following works:

html
_="on click take .{'side-menu--active'} from <a/> in #side-menu for #{event.target@data-target}"