https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • Is there a way for me to use the hx-trigger in a way where it works on events from all children that have been filtered? I have a form where I want to trigger the post method on a change event ocuring on all children that match q css query selector. I found that I can make a query that works but only for the first found child, not all children that match ... I have "hx-trigger: 'change from:find input.some-class'". This will work, but only for the changing of the first input in the form, how could I extend this filtering to apply to all inputs in that form?
    b

    brief-sugar-79424

    03/30/2023, 8:21 AM
    Is there a way for me to use the hx-trigger in a way where it works on events from all children that have been filtered? I have a form where I want to trigger the post method on a change event ocuring on all children that match q css query selector. I found that I can make a query that works but only for the first found child, not all children that match ... I have "hx-trigger: 'change from:find input.some-class'". This will work, but only for the changing of the first input in the form, how could I extend this filtering to apply to all inputs in that form?
  • ```html <form hx-post="/example" hx-target="next output" hx-trigger="input[!target.classList.contains('ignoreMe')]"> ```
    m

    mysterious-toddler-20573

    03/30/2023, 12:39 PM
    Copy code
    html
    <form hx-post="/example"
          hx-target="next output"
          hx-trigger="input[!target.classList.contains('ignoreMe')]">
  • this will ignore all `input` events from targets that have the `ignoreMe` class on them
    m

    mysterious-toddler-20573

    03/30/2023, 12:39 PM
    this will ignore all
    input
    events from targets that have the
    ignoreMe
    class on them
  • Does response content have to have `hx-swap-oob` set in order to work with `hx-select-oob="#my_id"`?
    w

    white-motorcycle-95262

    03/30/2023, 2:54 PM
    Does response content have to have
    hx-swap-oob
    set in order to work with
    hx-select-oob="#my_id"
    ?
  • let's find out
    m

    mysterious-toddler-20573

    03/30/2023, 3:20 PM
    let's find out
  • it does not appear so
    m

    mysterious-toddler-20573

    03/30/2023, 3:20 PM
    it does not appear so
  • https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L758
    m

    mysterious-toddler-20573

    03/30/2023, 3:20 PM
    https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L758
  • 🤔 I was getting an error if the response didn't contain `hx-swap-oob` but the requesting element had `hx-select-oob="#my_id1, #my_id2, #my_id3"`. I got it to work by ditching `hx-select-oob` and just specifying `hx-swap-oob` in the three divs in the response (e.g., specifying it on `#my_id1`, 2, and 3)
    w

    white-motorcycle-95262

    03/30/2023, 3:36 PM
    🤔 I was getting an error if the response didn't contain
    hx-swap-oob
    but the requesting element had
    hx-select-oob="#my_id1, #my_id2, #my_id3"
    . I got it to work by ditching
    hx-select-oob
    and just specifying
    hx-swap-oob
    in the three divs in the response (e.g., specifying it on
    #my_id1
    , 2, and 3)
  • Hi, is it possible to have HX-Trigger with conditional expressions? I would like for the `change` to fire only when the current select and another select have values. Not sure how to create the syntax. Also, if it is easier to achieve on the Hypersciript side, I would still like to simulate an HTMX swap event so but not sure which way is easier?
    c

    careful-room-54859

    03/30/2023, 5:04 PM
    Hi, is it possible to have HX-Trigger with conditional expressions? I would like for the
    change
    to fire only when the current select and another select have values. Not sure how to create the syntax. Also, if it is easier to achieve on the Hypersciript side, I would still like to simulate an HTMX swap event so but not sure which way is easier?
  • Oh wow, Idiomorph is fantastic … thank you for this
    e

    eager-plumber-49649

    03/30/2023, 5:38 PM
    Oh wow, Idiomorph is fantastic … thank you for this
  • Ah, it is a JS expression, so you can do it with a logical and
    e

    eager-plumber-49649

    03/30/2023, 5:46 PM
    Ah, it is a JS expression, so you can do it with a logical and
  • (a && b) probably
    e

    eager-plumber-49649

    03/30/2023, 5:47 PM
    (a && b) probably
  • where you write the logic you want to ensure that the request should be submitted in the function `ensureMyConditionIsMet()` (and rename it to whatever is sensible)
    m

    mysterious-toddler-20573

    03/30/2023, 5:52 PM
    where you write the logic you want to ensure that the request should be submitted in the function
    ensureMyConditionIsMet()
    (and rename it to whatever is sensible)
  • you could use hyperscript like this ```html <div hx-get="/whatever" _="on change if #select-1's value is not '' and #select-2's value is not '' then trigger submitRequest" hx-trigger="submitRequest" ...> ```
    m

    mysterious-toddler-20573

    03/30/2023, 6:08 PM
    you could use hyperscript like this
    Copy code
    html
    <div hx-get="/whatever"
         _="on change
               if #select-1's value is not '' and
               #select-2's value is not '' then
                 trigger submitRequest"             
         hx-trigger="submitRequest" ...>
  • https://codepen.io/1cg/pen/RwYmLOr?editors=1000
    m

    mysterious-toddler-20573

    03/30/2023, 6:08 PM
    https://codepen.io/1cg/pen/RwYmLOr?editors=1000
  • basically catch and filter the event in hyperscript and trigger htmx on a custom event from that hyperscript
    m

    mysterious-toddler-20573

    03/30/2023, 6:08 PM
    basically catch and filter the event in hyperscript and trigger htmx on a custom event from that hyperscript
  • hyperscript + htmx is good stuff folks
    m

    mysterious-toddler-20573

    03/30/2023, 6:09 PM
    hyperscript + htmx is good stuff folks
  • Yeah, thanks so much this is working! Is there a way to reference the current URL and also append a query parameter on in Hyperscript? So that the `hx-get` includes the query parameter as well as the current url?
    c

    careful-room-54859

    03/30/2023, 6:11 PM
    Yeah, thanks so much this is working! Is there a way to reference the current URL and also append a query parameter on in Hyperscript? So that the
    hx-get
    includes the query parameter as well as the current url?
  • can you make that div a form?
    m

    mysterious-toddler-20573

    03/30/2023, 6:23 PM
    can you make that div a form?
  • It *should* include the selects in the URL constructed for the get
    m

    mysterious-toddler-20573

    03/30/2023, 6:24 PM
    It should include the selects in the URL constructed for the get
  • Request parameter
    p

    proud-librarian-99598

    03/30/2023, 6:27 PM
    Request parameter
  • I can have multiple forms on a page. What I am trying to do is allow for template fragments. On the server, I render the full template but if there is provided a query param, `fragment_id` provided in the query parameters, then I know that I am not returning the full template but just a portion of the HTML generated on the server. This allow my users to create a single template but then reference different parts of it that they want to be refreshed when an event happens. So I am trying to update the current URL with a customer query parameter, `fragment_id`. The form data can also be passed in as well but that is not the issue I am trying to solve right now. I am just trying to define a user friendly way to generically achieve this when they are creating their screens.
    c

    careful-room-54859

    03/30/2023, 6:29 PM
    I can have multiple forms on a page. What I am trying to do is allow for template fragments. On the server, I render the full template but if there is provided a query param,
    fragment_id
    provided in the query parameters, then I know that I am not returning the full template but just a portion of the HTML generated on the server. This allow my users to create a single template but then reference different parts of it that they want to be refreshed when an event happens. So I am trying to update the current URL with a customer query parameter,
    fragment_id
    . The form data can also be passed in as well but that is not the issue I am trying to solve right now. I am just trying to define a user friendly way to generically achieve this when they are creating their screens.
  • If you want to mutate the URL the best way to do that right now is to catch the `htmx:configRequest` event and update the `detail.url` property: https://htmx.org/events/#htmx:configRequest
    m

    mysterious-toddler-20573

    03/30/2023, 6:54 PM
    If you want to mutate the URL the best way to do that right now is to catch the
    htmx:configRequest
    event and update the
    detail.url
    property: https://htmx.org/events/#htmx:configRequest
  • Thanks, will look into that! I appreciate it.
    c

    careful-room-54859

    03/30/2023, 6:54 PM
    Thanks, will look into that! I appreciate it.
  • I'm selling htmx to guys in Odin discord
    s

    some-airline-73512

    03/30/2023, 11:06 PM
    I'm selling htmx to guys in Odin discord
  • s

    some-airline-73512

    03/30/2023, 11:07 PM

    https://cdn.discordapp.com/attachments/725789747212976259/1091136531852435507/image.pngâ–¾

  • React is not fast rendering. I don't believe in the vdom propaganda lol
    a

    agreeable-midnight-69265

    03/31/2023, 9:55 AM
    React is not fast rendering. I don't believe in the vdom propaganda lol
  • For the same reason, writing games in react is probably not the best idea 😀
    e

    echoing-lion-55988

    03/31/2023, 11:21 AM
    For the same reason, writing games in react is probably not the best idea 😀
  • You know the vdom idea is flawed when Rich Harris thinks vdom is overhead
    r

    refined-waiter-90422

    03/31/2023, 12:38 PM
    You know the vdom idea is flawed when Rich Harris thinks vdom is overhead
  • hydration is pure overhead
    m

    mysterious-toddler-20573

    03/31/2023, 12:39 PM
    hydration is pure overhead
1...108210831084...1146Latest