i also think you need a valid event name to start the hx-trigger:

<div hx-post="/search" hx-trigger="submit from:#theform">...</div>

https://htmx.org/docs/#indicators Anybody know how I can use a css spinner with this? Say with a bulma button ().

i add the htmx-indicator class to it but it either doesn't show at all or shows all the time

depending on which element I add the class to

Is there any way to highlight the currently active page link on a navbar? Using e.g. Bootstrap one just has to put

.active

on the current nav-item and it is styled. I've asked this question before and got recommended to try using tabs instead but that requires some hacks to make it look good, and it's more of a workaround than a solution for something that is likely a very common use-case. I'm sure there's some clever way to accomplish this with htmx. I've tried naming all my nav-items and using

hx-swap-oob

to add

.active

to it when clicked but I don't know how to remove it when a different one is clicked. One thing I haven't tried yet, but that might work, is to

hx-swap-oob

in the entire navbar (or at least the part containing all the nav items) but that would result in a nightmare maintaining the block over several different files and keeping it uniform. With Unpoly, the class

.up-current

can be added automatically and one can simply style that one: https://unpoly.com/up-nav. But I want to build with htmx and there has to be a way. Thankful for any suggestions.

I can confirm that the

hx-trigger="submit from:#theform"

puts the event on the form, where

hx-trigger="from:#theform"

puts it on the div, which probably does nothing I'm guessing. I think which event (

submit

in this case) is the default assumption should be based on the

from

target, not the element the trigger is on. And in the case of a

from

being present in the trigger, the element identified by the

from

should get the event placed on it. What element gets what event handler is an implementation detail that might be over my head.

re htmx-indicator. It looks like some sort of overlay logic is necessary to place it exactly where something is already taking space.

I am a newb myself but i think replacing the whole navbar should work.

or something with https://htmx.org/headers/hx-trigger/

if this works. your stuff should work too

Thanks for the suggestion! but not sure hx-trigger is suitable for this use-case, at least I'm not seeing it yet. But I'll try playing around with it. I mentioned replacing the entire navbar but it would be such a pain to maintain it because

hx-oob-swap

swaps in a div from the target file, meaning that each file has to contain the nav block and if there's a change it would have to be implemented across all those files. Well there's probably only 3-4 of them, but still..

Regarding the video, I reckon it's a bit different than my "current navbar item" case as I want to both add and remove classes over different elements. For example with Unpoly,

.up-current

is automagically added to the clicked nav-item and when a different nav-item is clicked, the class gets removed from the old nav-item and moved to the new one.

broadly I would avoid using

from:

unless it really adds clarity, and just put the

hx-

attributes on the element that will trigger the request. This is better for locality of behavior: https://htmx.org/essays/locality-of-behaviour/

The easiest thing is to include the nav in the replaced content. If that isn't satisfactory, then to include the entire nav in an oob swap. If that isn't satisfactory, to use a server triggered event and write some javascript or hyperscript to update the active class: https://htmx.org/examples/update-other-content/

hyperscript offers a

take

command that allows you to implement this pattern pretty easily: https://hyperscript.org/commands/take/

Both those links look interesting, I'll take a closer look. Thanks!

yep! in general you fill find htmx more explicit (or more work, according to tastes) when compared w/ unpoly, which is more of a fully featured framework

yeah that is my understanding, and that is perfectly fine. I mentioned how unpoly does it to see if anyone knew if htmx had something similar

honestly unpoly is probably more suitable for my level of skill when it comes to webdev but htmx seems to be trending and has more dev activity and community around it so it is worth for me to learn

6k stars and hyperscript coming along nicely too!

no worries, we love unpoly too: it's a great Hypermedia Driven Application framework. With htmx we've tried to build up from existing HTML concepts and not get too elaborate beyond that. That means that for higher level components like modals, you'll need to integrate htmx with some other tool or build it yourself. The patterns for this are starting to emerge but it will never be as easy as modals in upoly, for example, where there is built in support.

just philosophical differences between two libraries that are great friends.

is there a

play

command in Hyperscript? I saw

play command using Web Audio API

in the todo for 0.9.x release, but i'm not seeing anything else about it.

no, unfortunately the audio API in javascript was a little too gnarly for me to deal w/ for an admittedly obscure feature. If you are interested in it I can help you get started on implementing it though!

> just philosophical differences between two libraries that are great friends. an example for us all!

I don't need anything as deep as the that I don't think. I just want to play a WAV on click for now. Experimenting with htmx and hyperscript

I know I could call js to do it, but was hoping there was a hyperscript way to do it.

ah, ok, the javascript API should translate easily into hyperscript