https://htmx.org logo
Powered by
# htmx-general
  • g
    Yeah. You're right. Htmx probably shouldn't be the "HTTP narc"
  • g
    (but I still feel like we should 
    console.log("wtf man?")
    just so the server feels bad about itself)
  • g
    That's what I'm here for
  • d
    I want to have a table and be able to "expand" individual rows (by adding a tr after a clicked row). I'm thinking: 1. 
    hx-trigger="click" hx-get="/somedata" hx-target="this" hx-swap="afterend"
    2. disable subsequent clicks on that original tr with some hyperscript 3. provide a close button in the new tr to zap itself, and reinstate the trigger on the original tr. I feel like there might be a more idiomatic way 🙂
  • b
    I have done exactly this ... an inline editable table with deleting rows, adding rows etc. Let me give you some advice I learned painfully: HTMX does not play well with tables. Use divs and some bootstrap/shoelace/tailwind ... Maybe @mysterious-toddler-20573 can tell you exactly what it is that makes this unpleasant, but I think it has something to do with how tables themselves are not very well defined in the HTML spec and how browsers work with them. But I might be wrong here.
  • s
    Hi I do not have problem with oob swap doing it work of replacing the form with error form. The response does not have games list and thus target is setting to empty. in fact since no content target is empty now error form cannot submit since the target is wiped out. we can put empty div for target in oob swap or response but point is why cannot we leave the list (target) as it is when no response for it and there is oob swap present. It similar to having error div and target div. If reply is error show in error div (which is same as form div in this case) and when success then that list in target (which is gameslist). was that not clear in my original message ?
  • s
    to achieve above you can think if you want to use response status code etc. as i suggested in discussion like 204 + oob swap leave target as it is and use only swap. if 200 + oob + otherrespnse then swap target also.
  • s
    Did this using CSS grid. One thing that did help me to get a tr like element: https://twitter.com/lxztlr/status/1516521096513835014
  • a
    hey peeps, i’m having an issue with 
    hx-swap-oob
    on some generated HTML. i have a button, that toggles an HTMX request; the response is two elements, a and a . depending on whether the button comes before or after the tr has weird effects on the behaviour of the page
  • a
    the returned button is meant to replaced the button that generated the request in the first place. could this be part of the problem?
  • a
    ah, i see others have also had issues with tables and htmx, I’ll see if i can use another structure :/
  • t
    From my experience, you have to make sure your table structure remains strictly valid, i.e. no content outside of a 
    <td>
    or 
    <th>
    , no 
    <td>
    outside a 
    <tr>
    , etc.
  • g
    Yes. And swapping directly into tables is hard. There’s two things that might help, depending on your setup: 1) wrap rows in a TBODY tag. This usually helps browsers to do what you’d expect. 2) use the setting htmx.config.useTemplateFragments. This uses a newer (not IE compatible) API that handles tables better.
  • m
    \> tables
  • m
  • m
    Copy code
    js
                var startTag = getStartTag(resp);
                switch (startTag) {
                    case "thead":
                    case "tbody":
                    case "tfoot":
                    case "colgroup":
                    case "caption":
                        return parseHTML("<table>" + resp + "</table>", 1);
                    case "col":
                        return parseHTML("<table><colgroup>" + resp + "</colgroup></table>", 2);
                    case "tr":
                        return parseHTML("<table><tbody>" + resp + "</tbody></table>", 2);
                    case "td":
                    case "th":
                        return parseHTML("<table><tbody><tr>" + resp + "</tr></tbody></table>", 3);
                    case "script":
                        return parseHTML("<div>" + resp + "</div>", 1);
                    default:
                        return parseHTML(resp, 0);
  • m
    tables
  • m
    i love them
  • f
    I'm using htmx with tables A LOT theses days, an I didn't had any problem with it. Just try to have a proper structure like other said.
  • a
    so, i do have a tag in the source DOM, and the hx-target is afterend of the button’s closest containing tr within that body
  • t
    Can you show us your code?
  • m
    I, of course, cannot read this article and risk understanding what "hydration" means, but despite not having read it, I am laughing: https://www.builder.io/blog/hydration-is-pure-overhead
  • h
    > Resumability focuses on transferring all of the information from the server to the client. The information contains WHERE and WHAT (APP_STATE and FRAMEWORK_STATE). The additional information allows the client to reason about the application without downloading the application code eagerly. Only a user interaction forces the client to download code to handle that specific interaction.
  • h
    they made a new framework
  • h
  • h
    does demo.htmx support boosting?
  • m
    i believe so
  • m
    i don't see why not
  • h
    I found a bug w/ alpine.js and need to do a test case and was thinking that might be a good example
  • m
1...641642643...1146Latest