https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    But I need that list to update regardless of how this first select is selected, whether by the user, or by my hyperscript thing
  • a
    Copy code
    html
<button type="button" class="btn btn-info" _="on click set #id_matches-4-theirDeck's value to '60'">
            set
        </button>
  • a
    Is this possible?
  • r
  • r
    Manually trigger event after changing the value
  • a
    @ripe-action-67367 thanks!
  • a
    ok, looking at it I can't understand how to use it
  • a
    the example has some kind of function called 'doIT' but I don't understand what doIT is
  • a
    I want it to trigger all(?) the htmx stuff thats on that select element
  • t
    doIT
    is an event. The first div sends the 
    doIT
    event to 
    #div1
    with the 
    answer
    parameter set to 42.
  • a
    I guess I don't understand what an event is
  • a
    Can what I want to do be an event? where/how do I define it?
  • t
    an event is just something that happens. When you click a button, the 
    click
    event is triggered, and then things that care about that click listen to the event and do things
  • t
    In your select, you have your trigger set to 
    change
    . When you change the selected value, the 
    change
    event is triggered, and htmx listens to that event and does things when it happens.
  • t
    You can trigger the change event in the same way that example is triggering the 
    doIt
    event
  • t
    on click send change to #id_matches-4-theirDeck
  • a
    ah I see
  • a
    thanks for explaining
  • t
    You can also use 
    trigger
    instead of 
    send
    if that helps you understand that you're triggering an event, they're just synonyms as far as hyperscript is concerned.
  • a
    Copy code
    html
<button type="button" class="btn btn-info" _="on click set #id_{{theirdeckfield}}'s value to '{{getdeck.theirDeck.id}}' then 
                                                        trigger change on #id_{{theirdeckfield}} then
                                                        set #id_{{theirflavorfield}}'s value to '{{getdeck.theirFlavor.id}}'">
            set
        </button>
  • a
    it works! thanks @tall-dinner-62086
  • f
    I went for hx-swap-oob
  • f
    What is your experience using HTMX on larger scale applications. Can you keep the workings clear. I notice I'll creating more small components and more #id in html. I'm still learning to use it. I do like the easy workflow and lots less things that can go wrong then working with a frontend framework
  • t
    I don't think htmx is any different from anything else at scale. If you're building a component, you don't really have to worry about the scale of the whole application. Just make sure you have your namespaced ids in place, and you have the endpoints you need to get the html you want.
  • b
    I think something me & colleagues have found slightly challenging so far is keeping track of hx- attribute inheritance. Sometimes it can be quite subtle, like 
    hx-swap="outerHTML"
    rather than 
    innerHTML
    , coming from a parent element etc. But it's always possible to troubleshoot and fix. Apart from that, agreed that it shouldn't be much different from anything else at scale AFAIK
  • f
    with hx-swap-oob I found myself {% include ... %} twice the same element. Once in the form and once when it initaily render. This could get frustrating. Also I had to come up with a ID name so I can place in it. My fear is that my lazy mind and bad habbits might make some sort of naming battle and make me lose track of how it works. But HTMX creator deserves a lot of 💌
  • b
    I find making IDs as verbose/explicit as possible is useful, so even a lazy/forgetful mind is unlikely to cause ID conflicts
  • t
    For components, namespacing helps a lot. i.e. 
    id="searchWidget_searchbar"
  • b
    In terms of including the same element twice, at least it's an 
    {% include %}
    instead of the whole markup twice! But I do know what you mean. Still, OOB is a nice additional option for swapping extra content, so I think it's worth the double inclusion for the usefulness it provides
  • r
    Oh shit htmx trending
1...740741742...1146Latest