https://htmx.org logo
Powered by
# htmx-general
  • b
    It does. The initial document contains:
    Copy code
    <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>myapp</title>
      <script src="https://unpkg.com/htmx.org" defer></script>
      <link rel="icon" href="data:,"> 
    </head>

    <body hx-boost="true">
        <nav>
          <div>
            <a href="/">Home</a>
            <a href="/guests">Guests</a>
            <a href="/status">Statuses</a>
          </div>
        </nav>
        
        <div id="flash" hx-swap-oob="true"></div>

        <main>
          <ul>
            <li>test</li>
          </ul>
        </main>
    </body>
  </html>
    (
    hx-swap-oob
    already exists in the original document because I use the same template for doc and htmx responses for the flash div). And when I click on the 
    /guests
    anchor, a boosted request is fired and I have this in response from the server:
    Copy code
    <nav>
  <div>
    <a href="/">Home</a>
    <a href="/guests">Guests</a>
    <a href="/status">Statuses</a>
  </div>
</nav>
        
<div id="flash" hx-swap-oob="true"></div>

<main>
  <p>List of guests</p>
</main>
    And so it swapped into the body, but the 
    #flash
    div is removed from the dom :/
  • m
    Ah, yes, I see
  • m
    Yes, the 
    hx-swap-oob
    is going to replace the content. Is there a way to test if there is a current flash to show?
  • m
    to put a condition around it?
  • b
    But when I use regular htmx requests (and not regular anchors boosted), I don’t have the same behavior. See this initial document:
    Copy code
    <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>myapp</title>
      <script src="https://unpkg.com/htmx.org" defer></script>
      <link rel="icon" href="data:,"> 
    </head>

    <body>
        <nav>
          <div>
            <a href="/">Home</a>
            <a href="/guests">Guests</a>
            <a href="/status">Statuses</a>
          </div>
        </nav>
        
        <div id="flash" hx-swap-oob="true"></div>

        <main>
          <p>List of statuses</p>
          <ul>
            <li>
              <span hx-get="/test" hx-target="main">test</span>
            </li>
          </ul>
        </main>
    </body>
  </html>
    And I click the 
    span
    which makes an htmx request to 
    /test
    and returns:
    Copy code
    <div id="flash" hx-swap-oob="true"></div>
<p>my test</p>
    Then, the 
    #flash
    div is replaced correctly (but stays empty as the out of band 
    #flash
    from the response is also empty. Why would it be different for boosted requests?
  • b
    Mmm. Maybe I understand. When using the 
    hx-boost
    , the target is by default the 
    body
    , and so the out of band 
    #flash
    div is in fact part of the target, and not outside of it. I was expecting that an out-of-band element in a response would still be replaced even if landing inside of the target.
  • b
    (in my second example, the target is 
    #main
    and so 
    #flash
    is outside (aka out-of-band) of 
    #main
    ).
  • b
    So I think I need a specific condition on the backend for boosted requests to avoid adding the 
    hx-swap-oob="true"
    when responding with the 
    #flash
    div.
  • b
    And to simplify this condition, it would be nice to have a request header 
    Hx-Boosted
    sent by htmx that would be different from 
    Hx-Request
    . It would clearly differentiate the two use-cases 😊
  • m
    that's a good idea, can you create a github issue?
  • b
    Sure
  • h
    👋 Hi all. Thanks for HTMX. I'm having fun playing with it. I have some forms that are using 
    hx-boost
    , but when they submit successfully and then redirect, they load the content from the new 
    Location
    but they don't change the current URL in the browser. I've tried setting the 
    HX-Push
    header and it doesn't have an effect. Is this expected behavior?
    • 1
    • 1
  • m
    Hi There. would you mind posting your HTML?
  • m
    looking at the code, can you add 
    hx-push-url='true'
    to the form?
  • b
  • h
    Sure, I can try that, but I was expecting it to work out of the box. It's basically 
    <body hx-boost="true">
    with a 
    <form>
    inside it. (Should this be changing the URL on redirect?) It might be a bit until I can post more details.
  • m
    Yeah, I have some logic that doesn't push the URL unless the form is a GET, which kind of makes sense in some cases, but not yours. Need to think about it more.
  • m
    what back end frameworks do ya'll use?
  • b
    Currently exploring htmx alongside a simple go project (without any particular framework, but only std lib). Htmx can really work with your framework of choice.
  • a
    Professionally I'm using it the first time with Wordpress on a government/city site that is mostly "static" but has a ton of content, a consistent design (=> optimal for partial DOM updates), and some application functionality sprinkled on top. Not really "back end" but I also wrote a serviceWorker that caches (and updates) HTMX requests. The included custom HTTP headers make this super convenient. The reason I/we chose htmx is that my colleague cannot be arsed to learn/use React/Nextjs (which I have been using to build web applications that are more dynamic and require data-model design and a dynamic UI). Htmx is perfect here because it provides declarative functionality with a very minimal learning curve and it integrates seamless into our caching strategy. In side projects/prototypes I used it with Clojure (not with a framework) before. Seamless. Currently I'm working on a Rust side project that uses htmx. Htmx is really super backend agnostic. It just works, and pushes you to get closer to HTTP/HATEOAS/REST on both frontend and backend development, which is just simpler and kind of relaxing as in there are less decisions to make. You obviously still have to tailor the server responses if you don't use hx-boost.
  • m
    i have enjoyed creating some stuff w/ htmx in spark java: https://sparkjava.com/ i built a web front end for my compilers class in it, using htmx to submit source code to various end points: lexing, parsing, eval, transpiling and finally compiling (to JVM bytecode). htmx and sparkjava worked really nicely together. If I were going to do something professional, however, I would look at springboot (and ask @User for help 🙂 )
  • m
    speaking of @User , he started a page to collect server-side examples w/ htmx: https://htmx.org/server-examples/ which shows off the diversity of server-side stacks and the HOWL (HTML On Whatever you'd Like) stack
  • m
    and I just realized that it doesn't have one of my favorite HOWL examples: htmx (and hyperscript!) on common lisp (!!!), by @User ! https://github.com/rajasegar/ccl-demo-raja
  • m
    🔥
  • m
    updated the htmx doc to include some common lisp examples
  • f
  • u
    Hi, I have a question: is hx-push-url unnecessary when using hx-boost on an anchor? The hx-boost doc already says it wil “push the url so that a history entry is created” . Thanks for the nice library.
  • m
    No it should not be
  • m
    Very happy with how this turned out using htmx and Alpine. It's an embed widget to place on other websites. It loads the form using htmx.ajax. Search is also using htmx to show the results. For the Google Map, each item in the list includes some data attributes with the coordinates to add the markers, and the infowindow content comes straight from the list item's innerHTML. Using Alpine JS for the map and all the sprinkles. To be able to use htmx events in a CORS request it's necessary to add a header in the response 
    Access-Control-Expose-Headers: HX-Trigger
  • m
1...368369370...1146Latest