https://htmx.org logo
Powered by
# htmx-general
  • p
    I guess I'm just not understanding exactly how that works -- re-reading the docs now
  • h
    you'd have to duplicate the copy to swapped in w/ a oob swap right?
  • a
    I have 3 selects. On change on any of them, I want to issue a request sending the selected value of all 3. I guess I need some JS for that, and hook it up with hx-vals, right? there is no "pure htmx" way of doing that.
  • a
    well, that seemed to do the trick, good enough:
    Copy code
    hx-vals="js:{compute_type: document.getElementById('compute-type').value,
        cluster: document.getElementById('cluster').value,
        plan_type: document.getElementById('plan-type').value}
  • p
    Yeah I tried that and it just blows away my whole page. I guess I still haven't wrapped my head around how it's supposed to work. The actual 
    hx-swap-oob
    attr goes only in my partial that comes back as the response right?
  • h
    if you take the oob approach I think you'd have the element kicking off the request target "first-place", then the response would be like
    Copy code
    html
<div>
  content
</div>
<div hx-oob="second-place">
  content
</div>
  • h
    obviously that's a little ugly becuase content is duplicated
  • p
    Sorry. Still clear as mud to me. I'll grok it eventually but I'm not there yet.
  • p
    But thanks for trying 🙂
  • m
    another approach would be to slap a class on all those selects and use 
    hx-include
    to include them all
  • t
    ic-include
    ?
  • m
    hx-include
  • m
    it was a long night
  • t
    Maybe you should drink a little bit of water
  • m
    \> kicking a man when he's down
  • m
    i don't drink water, only coffee
  • t
    That explains a lot
  • a
    oh, I think I like that even more. Checking...
  • a
    so, to the parent element with the 
    hx-get
    I could add 
    hx-include=".filter"
    , and then add the 
    filter
    class to each child 
    select
    element? I think I'm not getting how hx-include is supposed to work, because that is not including any params to the request.
  • m
    that should work
  • m
    can you post the HTML?
  • a
    oh, I found the issue
  • a
    it expects the 
    name
    attribute to be on the element, as it uses that for the param name
  • a
    for my case I could even get rid of the class and just do 
    hx-include="select"
  • p
    Okay so now I'm deeply, inappropriately in love with 
    hx-swap-oob
    (now that I understand it). I'm working on some Express middleware to put it to use to achieve near-superpowers on the server side.
  • t
    Somebody stop him before he becomes too powerful!
  • p
    Check it out: 
    res.render('/some/path', { vars })
    will parse my templates, wrap it in a layout, populate the vars, etc. and then render the full page. But... 
    res.swap('/some/path', { vars })
    will look for an 
    HX-Trigger
    header and then return only that element by id in the response – I'll use Cheerio or something to grab just that chunk of DOM. And then there's the THIRD optional arg which is a list of additional ids to be swapped (by appending hx-swap-oob nodes to the response)
  • p
    The result is a very simple API for only returning whatever chunks of DOM you want to be updated.
  • p
    @tall-dinner-62086 Someone should have thought of that before they let me get my hands on HTMX -- now it's too late! The power is MINE –- mwah ha ha haaa! 🤓
  • t
    That's pretty good. I've been considering how to do what you're doing in laravel using blade templates. I was considering having an 
    @htmx()
    directive that would conditionally render content based on htmx headers. So for example I could request an update to an item on a table, with an oob swap for the "totals" line. It's sort of the opposite approach of trying to only build what I need from my templates, instead of extracting ids from the templates after rendering them.
1...702703704...1146Latest