search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.39k stars 1.31k forks source link

Class tools extension question #299

Open constantin-webc opened 3 years ago

constantin-webc commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Thank you.

constantin-webc commented 3 years ago

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

Bonten156 commented 3 years ago

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 commented 3 years ago

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

1cg commented 3 years ago

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 commented 9 months ago

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.