https://htmx.org logo
Powered by
# htmx-general
  • l
    I tried doing something like this.
    Copy code
    <div>
    <input class="form-control" type="text" name="month" value="{{ "now"|date("m-Y") }}"
        hx-get="/extraPay/validate/dateformat"
        hx-target="#adjustments-tbody"
        hx-trigger="keyup changed delay:100ms"
       hx-swap="outerHTML"/>

    <span id="date-format-message" hx-swap-oob="true" class="help-block" style="display: none"></span>
</div>
  • l
    Copy code
    <div>
    <table>
        <tbody id="adjustments-tbody" hx-swap="outerHTML">
        <tr>Some data here</tr>
    </tbody>
</div>
  • l
    Then in my response I return something like this
  • l
    Copy code
    <span id="date-format-message" hx-swap-oob="true" class="help-block">Invalid month, should be MM-YYYY</span>
<tbody id="adjustments-tbody" hx-swap="outerHTML">
    <tr>uh-oh!!!</tr>
</tbody>
  • l
    So I had two issues I was hitting with this. Using the code setup similar to what I have here it correctly updates the 
    date-format-message
    span to display/hide the warning But when it updates the 
    tbody
    everything is gone except the text "uh-oh!!!" (in this example). The 
    tbody
    and 
    tr
    tags are missing after the request.
  • l
    The other issue was that I initially tried having the 
    date-format-message
    element as the target and the 
    adjustments-tbody
    as the oob when that happened the 
    adjustments-tbody
    text just ends up being placed inside the 
    <div>
    with the input instead of in the proper location on the dom. Sorry for the long post; I'm a noob on HTMX and I'm unclear how this oob stuff is supposed to work when I need to target different dom sub-heirarchies.
  • m
    It's possible that targeting a tbody outerHTML doesn't work
  • m
    tables are extremely difficult to work with
  • m
    can you convert to a div?
  • l
    So I switched to use the default innerHTML, which was ok as a work around for this.
  • m
    yes
  • m
    innerHTML usually works, even w/ tables
  • l
    I'm a bit more confused though in general about how the out of band works.
  • m
    but tables in general have all sorts of rules
  • m
    and we have to handle them specially in the swap logic
  • l
    In this instance I have only 2 things I need to target.
  • l
    But what if I need to target more elements and they are structured in different sub-trees of the DOM like this?
  • l
    It seems like either out of band should work even if the elements are at different levels or alternatively I should be able to set multiple targets.
  • l
    Maybe that's already possible and I just don't know enough yet to see how
  • l
    That makes sense about the tables, but switching tables to "table-like" divs can run up against accessibility issues
  • m
    Yeah, the best thing is to target the innerHTML of the table body, as you are doing. Annoying but it is what it is.
  • m
    All an oob swap does is take a chunck of HTML and slam it into the DOM by id, wherever it is
  • m
    nothing more or less than that
  • m
    so if your target is "#foo" and you want to update "#bar" and "#doh" as well, you can piggyback those updates on it.
  • l
    Ok, that's odd then. Maybe it's because it was a tbody
  • m
    But the are assumed to be outside "#foo"s hierarchy, and the swap is always __outerHTML__
  • l
    Give me a couple minutes and I'll flip it back and try with the innerHTML
  • m
    yeah, that might be it
  • l
    Ah...
  • l
    So you can't do an innerHTML swap with oob?
1...160161162...1146Latest