https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    well, not exactly. On my case the datalist gets loaded alongside the input, and keypresses on the input do not trigger new requests
  • a
    @mysterious-toddler-20573 how is your example different from https://codepen.io/sponsfreixes/pen/vYrzvdz ? I only see advantage on the htmx approach if the datalist is huge and you don't want to load everything.
  • g
    i think ive run into a weird edge case with boosting -- seems that 
    hx-boost
    swaps 
    innerHTML
    on the 
    <body>
    tag, which means if the source page made any modifications to that 
    <body>
    tag they carry over post-swap. With Bootstrap modals, when a modal opens it puts 
    overflow:hidden
    on the 
    <body>
    to prevent you from scrolling the body while the modal is open. And so if you follow a boosted link while the modal is open, on the post-swapped page you can't scroll anymore. Is there a way to configure 
    hx-boost
    to use 
    outerHTML
    ? I tried adding 
    hx-swap="outerHTML"
    to the boosted link and that didn't worke
  • g
    interestingly, 
    hx-swap="delete"
    works as expected (i get a fully blank page)
  • g
    where can i inspect the swapping strategy in the response event? i put a listener on 
    htmx:beforeSwap
    but i dont see it in the 
    event.details.requestConfig
  • m
    yes, I was trying to filter down based on server side logic, this was just a proof of concept
  • m
    but safari killed it
  • g
    i'm also using the 
    head-support
    extension here, not sure if that matters
  • g
    dangit i just found this at the bottom of the 
    hx-swap
    page 😦 > Due to DOM limitations, it’s not possible to use the outerHTML method on the element. htmx will change outerHTML on to use innerHTML.
  • m
    I think if you use idiomorph and you target the body w/ a 
    morph
    swap it should merge the attributes
  • m
    very experimental
  • m
    but might work
  • g
    hmmm
  • g
    let me try it
  • g
    doesnt appear to be working 😦
  • g
    oh well -- i found a workaround by listening for 
    htmx:beforeSwap
    and manually closing the modal
  • g
    here's a weird side effect of using 
    head-support
    with boosted links... if you have anything in the head that establishes event listeners, those listeners will get re-initialized every time the 
    <head>
    gets swapped back in... so if you navigate to the same page multiple times in a session then the listeners start to stack up and fire multiple times
  • g
    in some cases this can be really bad if those callbacks do something that isn't allowed to be repeated
  • m
    can I see some example code?
  • g
    cant share this code but let me draw up an example
  • m
    👍
  • g
    essentially this:
    Copy code
    html
<!-- /first-page -->

<html>
  <head>
    <script>
        $(document).on("htmx:beforeSwap", function(){
          console.log("Hello from first page");
        });
    </script>
  </head>

  <body hx-ext="head-support">
    <a href="/another-page" hx-boost="true">
  </body>
</html>


<!-- /another-page -->

<html>
  <head>
    <script>
        $(document).on("htmx:beforeSwap", function(){
          console.log("Hello from 2nd page");
        });
    </script>
  </head>

  <body hx-ext="head-support">
    <a href="/first-page" hx-boost="true">
  </body>
</html>
  • g
    when you load 
    /first-page
    it attaches the beforeSwap event listener, when you navigate to 
    /second-page
    you'll see 
    Hello from first page
    in the console. When you navigate back to 
    /first-page
    you'll see 
    Hello from first page
    AND 
    Hello from 2nd page
    because first listener wasn't removed when you swapped to the 2nd page
  • g
    i think the fix is to just always remove listeners before you you add them, like this:
    Copy code
    html
  <head>
    <script>
        $(document).off("htmx:beforeSwap");
        
        $(document).on("htmx:beforeSwap", function(){
          console.log("Hello from 2nd page");
        });
    </script>
  </head>
    This fails silently if there arent any listeners initialized
  • m
    Ah, OK, so a global document listener
  • g
    ah yeah i suppose this wouldnt matter if the listeners were attached to elements that were removed from the DOM
  • m
    if you put 
    hx-preserve="true"
    on that script, it should preserve it and not re-execute it even if it appears again
  • g
    ohhh thats an idea...
  • g
    but wait... wouldnt that carry over the 
    <script>
    tag into the newly swapped page? because i dont really want that (it might have other things beside event listeners)
  • m
    it shouldn't re-execute
1...927928929...1146Latest