And actually I find that the tests are the best place to find examples for most things https://github.com/bigskysoftware/htmx/blob/master/test/attributes/hx-trigger.js#L355

From Chrome this is what I've got (with working events and with

htmx.logAll()

)

@User Thank you kindly!

What I was doing actually surfing around on Reference page. https://htmx.org/attributes/hx-trigger/ finding this one, I would use the trigger modifiers if I could know that they are there (some link to this docs page as an extended explanation). It is due to my own laziness :<

What I'm trying to say is that it was kinda hard for me to figure out that I need to use

data-hx-trigger="checkerActualRequest from:body"

instead

data-hx-trigger="checkerActualRequest"

I even went writing some JS code with

document.body.addEventListener

to do everything here. But I thought I'm missing something - and that was it, the modifiers.

The docs are part of the repo so you could submit a PR with changes you believe would make it more clear.

Will do, thanks

Still got 'undefined' for anything I'm putting there. Events are firing nicely, but this monitorEvents() function always returns undefined. Probably I'm doing something wrong again 😄

Here I'm again. The trick hx-trigger="click target::not(button)" worked ok. To be true, at the beginning it didn't work, so I spent time studying a different combination of parameters. At the end I returned to your solution and ... it worked! 👍 Now, I guess some cache problem from Firefox (???)... but the source was correct.... Mistery. In any case, thank you very much for the solution that was right from the beginning. Paolo

The function won't return anything, but it will log events to the console afterwards. If you want to monitor events on the body do

monitorEvents(document.body)

Oh, got it. Wonderful and neverending discoveries in a software world... :F

I'm wondering what would be the correct way to add hx-get/hx-target to a bootstrap set of radio buttons? I have a structure that looks something like this.

html
<div class="form-check">
            <input class="form-check-input" type="radio" name="scheduleRadios" id="scheduleRadios1" value="STANDARD" checked>
            <label class="form-check-label" for="scheduleRadios1">
                Standard schedule: Designated work hours that set typical start and stop times for a unit's employees.
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="scheduleRadios" id="scheduleRadios2" value="FLEXIBLE">
            <label class="form-check-label" for="scheduleRadios2">
                Flexible schedule: Descriptions for types of flexible schedules can be found at the <a href="https://hr.uiowa.edu/well-being/family-services/workplace-flexibility/types-flexible-work-arrangements">Workplace Flexibility website</a>.
            </label>
        </div>

I want to trigger an hx-get when the selected radio changes and target another element that is a dependency to these radios.

here's another, probably dumb question: can you bake your own ``s yet? (like polymer or riot)

and i mean, not caring about w3c with their dashes in

custom elements

Will this do? I think if this note was there, I'd not ask questions regarding such stuff. It is quite unclear that you must listen to some events - especially for someone who is not familiar with JS but came from jQuery field xD

Looks good to me. You should submit the PR and see if it gets merged.

Okay. This is what I totally missed. Was a bit confused by "bubble up" term. My main language is not english, so I missed the point xD

🙂

Okay, it seems I've managed to create some PR. Hope done it right 😛

So, is it possible to do something like what I posted above with the bootstrap radio buttons? Can I somehow wrap in a div and trigger on a parent element? I don't see anything in the documentation similar?

You should be able to just put a

hx-trigger='change'

and

hx-target='#whatever'

on the inputs

the htmx/hyperscript dialectic

business up top, party in the back

Hypergorgeous

So I would just need to put it on each of the inputs?

yep

Ok; I was thinking that, but it seems clunky with a lot of inputs to duplicate the same thing on all of them. I was thinking there was probably a better way and that I was just being dumb.

You could put the listener up on a parent element if you want

the

change

event should bubble up