Class tools extension question

[constantin-webc]

First, thank you for HTMX

my question is certainly more due to a bad understanding on my part than an issue.

If I take the example of the toggle class It will only work if I add an attribute hx-get or hx-post.

Actually using HTMX without these attributes doesn't really make sense, but I was wondering if that was a bug or a misunderstanding on my part.

On the Demo page, the attributes are not present on the toggle demo and works fine.

Thank you for your help and reply.

Best wishes to all.

[1cg]

That seems like a bug. Looking at the source code it looks like it should work on any element, even if you don't have an hx-get.

I will try to get a chance to debug this tomorrow.

[constantin-webc]

Thank you.

[constantin-webc]

Just in case it might help, with htmx update, class tools does not work even if there is an hx-get or hx-post

[Bonten156]

I have a problem with class-tools too.

I tried to use class-tools toggle in my website. I have added the extension to the body. When I copy paste the example inside the body it's ok, it works. But when I try to do the same thing in an ajax generated html component, it does not works, I can't figure why.

[fess932]

why doesn't it work if there is no hx-get?

[1cg]

Can you set a breakpoint here:

https://github.com/bigskysoftware/htmx/blob/ecce4f19d4792f324f5fffc4cd80daeee45cce78/src/ext/class-tools.js#L73

And see if the classes attribute is being properly handled?

[ekaj2]

Just bumping this with another example:

I'm using the websocket extension which requires hx-swap-oob, so to get transition animations I need more than just setting a settle/swap delay like I would with a regular hx-swap (because hx-swap-oob doesn't support all hx-swap values despite what the documentation says).

So with my use case for a simple chat, a single message element looks something like this:

<div hx-swap-oob="beforeend" id="chat_transcript">
  <div class="myclass ..."
       classes="remove myclass:1s">
    <p>{{ message }}</p>
  </div>
</div>

classes doesn't seem to work here either, myclass doesn't get removed.

What's now line 81 for the evt.detail.elt line doesn't seem to get fired at all.