https://htmx.org logo
Powered by
# htmx-general
  • b
    side note: \`\`\`html \`\`\` for proper formatting :)
    Copy code
    html
<div />
  • a
    hey folks! I've been wanting to use htmx in a project for a while, and yesterday I finally did! been going through docs and examples, and it feels refreshing 🙂 thank you! I have a few questions but I guess the one I haven't been able to figure out is whether there is a way to chain swaps, or have multiple elements swapped with one action. to my limited understanding, it doesn't seem possible, but I'd love to have an authoritative answer on that, in case I'm missing something 🙂 I've searched the history, but couldn't really find an example. but my search skills aren't the greatest anyway!
  • g
    Take a look at the 
    hx-trigger
    attribute — you should be able to have multiple elements listen to the same event, which should do what you’re looking for.
  • g
    Another option might be to chain them sequentially, using the 
    hx-trigger
    response header. That will let you fire an event when the first swap completes, which you could use to trigger the second.
  • a
    thank you @User - I will start reading now 🙂
  • g
    Happy hunting! Let us know how it turns out!
  • a
    will do! cheers 🙂
  • m
    You can also have multiple elements swap with one action using oob swaps https://htmx.org/attributes/hx-swap-oob/. So you send the main html back that you want to swap and within than html or appended to it, you can add other fragments with specific ids and with the hx-swap-oob attribute and they'll be replaced in other areas of the page.
  • a
    thank you @User - let me dig into that too!
  • a
    does this apply to the 
    <body>
    tag itself? trying to change its 
    class
    🙂
  • m
    body tag can't be swapped unfortunately
  • a
    ah! 😦 that's alright, I'll find another way to do what I want with htmx 🙂
  • f
    Hey - I'm working on a demo of using HTMX with Spring Boot & Thymeleaf. So far it's going awesome. Porting the infinite scroll demo, and occasionally I'm getting this bonk-out in HTMX. Any ideas?
  • f
    I can swap out for the debug version of HTMX if that would be helpful. Right now I'm using the 1.3.2 version available as a webjar.
  • f
    It appears to be scrolling speed related. If I just scroll slowly it never happens, but if I scroll in the browser quickly it happens eventually, but it's not consistent.
  • f
    If I just whip my mouse wheel really fast I can force it to happen pretty quickly.
  • s
    Launching official site for HTML Driven Development at https://www.htmldriven.dev/ Look who is at the top of the tools page
  • u
    New here, when I develop with htmx does this mean for each UI part I want to swap I need a new endpoint which returns HTML?
  • m
    You can also reuse existing end points by checking header information, but yes you will often create new endpoints. Hopefully the ui layout suggests a sensible, hierarchical layout of urls
  • s
    Yes, you will create several endpoints. I use this pattern: endpoints which return whole pages are named like foo_page() with URL being /foo/. And endpoints which return fragments are named like foo_hx() with URL being /foo_hx/. I never do things like "if ... then return full_page else return fragment".
  • g
    Hi @freezing-crowd-50703 that is a great catch. I had a similar issue with the 
    revealed
    trigger a while back. I think we tried changing how it looks at scroll events to mitigate it. If it’s possible, more detailed debug info (or example code) would help a lot. Would you mind putting this into GitHub as an issue? In the meantime, I’ll try to take another look at the code that’s running now to see if anything sticks out.
  • m
    you might also use something like 
    /foo/hx
    which might be more in the spirit of RESTful URLs
  • m
    /foo
    being the parent resource and 
    /foo/hx
    being a child resource
  • m
    logically it doesn't make much of a difference, but I like imagining the URL patterns as a sort of HTTP file system
  • m
    turned this into a thread on deadbird: https://twitter.com/htmx_org/status/1386668069653676039
  • u
    Interesting that htmx needs servers I think it would be super easy to build something that fetches the UI on the fly client side for example fetch from /shopping-card.html
  • m
    the examples all use a mock server via sinon.js
  • s
    If you have a static site, then you don't need a server. I store my data in a central DB, and you django to create the html.
  • r
    @User any reason why you don't do the if else thing? I use partials along with query parameters to define endpoints and keep it RESTful. Usually like this: /resource/resourceid?do=action
  • f
    @User Sure - here's the GitHub repo. https://github.com/wiverson/htmx-demo
1...229230231...1146Latest