https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • s
    Is it possible when 
    hx-swap="innerHTML show:#header:top"
    is added that it does not slow scroll to the top, but is there instantly? As if it's a "normal" page load?
  • b
    any tricks on using hx-swap-oob="beforeend scroll:#mydiv:bottom" ?
  • b
    i want to append an element to a parent and scroll the parent to bottom
  • b
    I am using the websocket extension to return a partial and I want to append this partial to an element and scroll the element to bottom
  • h
    You can disable smooth scrolling with: 
    htmx.config.scrollBehavior = 'auto'
    (js api) or via a meta tag 
    <meta name="htmx-config" content='{"scrollBehavior":"auto"}'>
  • s
    Thanks, 
    <meta name="htmx-config" content='{"scrollBehavior":"auto"}'>
    did the trick
  • s
    But for a split second i still see the bottom of the next page
  • s
    I guess that's inevitable
  • s
    Hmm it's actually pretty annoying/ugly to have this, not sure how/if there is a way to fix this
  • s
    One way might be to show a sort of blank page, until the content is loaded / scrolled to top, then reveal the content
  • a
    when you try to add htmx to your repo and your IDE stops it because it has TODO items:
  • b
    I'm replacing part of my page using 
    hx-swap
    , its a grid view with pagination. It works perfectly, but it preserves its scroll position making it kinda hard to see that something happened if you're scrolled too far down (besides the pagination updating). Is it possible to scroll back up to the top of whatever div I `hx-swap`'ed with htmx?
  • h
    You can set the config value 
    defaultSettleDelay
    to 0 (default is 20) to make it seem instant.
  • b
    Found it
  • h
    Copy code
    htmx.on('htmx:beforeSwap', (event) => {
            // disable smooth scrolling for 'main' element swaps
            if (event.target.id === 'main') {
                htmx.config.scrollBehavior = 'auto';
                htmx.config.defaultSettleDelay = 0;
            }
        });

  htmx.on('htmx:afterSettle', (event) => {
            // re-enable smooth scrolling, if it was disabled
            if (event.target.id === 'main') {
                setTimeout(() => {
                    htmx.config.scrollBehavior = 'smooth';
                    htmx.config.defaultSettleDelay = 20;
}, 100);
            }
        });
  • r
    Meanwhile in Sublime Text land when you write a TODO...
  • m
    that should work (although w/ websockets it might not be perfect) can you debug?
  • b
    I will do it tonight and report the result
    • 1
    • 4
  • p
    I'm struggling to make an 
    htmx-oob-swap
    work with a 
    <tr>
    tag in order to prepend a table with a new row. 
    htmx.logAll()
    doesn't show anything happening for this 
    <tr>
    tag swap, while it works fine for other swaps. In the documentation and in other messages, I saw that I need to set `htmx.config.useTemplateFragments = true;`; how would I do this exactly, and where? Also, will it be a problem if I also include another, unrelated 
    htmx-oob-swap
    fragment in the response (it works fine with the other, non 
    <tr>
    swaps I perform, but I've seen messages that give me the impression that having more than one 
    htmx-oob-swap
    when one of them is in a 
    <tr>
    tag could cause issues (but I may have misinterpreted the message). Thanks.
  • m
    set the 
    htmx.config.useTemplateFragments
    config option to true, so it can handle table-related tags properly. This will sacrifice IE compatibility, but will allow you to do oob table-related stuff.
  • b
    hx-swap-oob beforeend plus scroll div to bottom
  • p
    Thanks @mysterious-toddler-20573 . I did try to do that by setting the following in the 
    <head>
    section of my web pages:
    Copy code
    <script
      src="https://unpkg.com/htmx.org@1.8.4"
      integrity="sha384-wg5Y/JwF7VxGk4zLsJEcAojRtlVp1FKKdGy1qN+OMtdq72WRvX/EdRdqg/LOhYeV"
      crossorigin="anonymous"
    ></script>
    <script>
      htmx.config.useTemplateFragments = true;
    </script>
    Even the Chrome Inspect tools shows 
    true
    when I type 
    htmx.config.useTemplateFragments
    in the Javascript console while the page is loaded. I'm quite a Javascript NOOB, so maybe I'm just doing it all wrong, but the ` section of the OOB swap still doesn't fire. Any other guidance to troubleshoot?
  • l
    // 2DO: something something something
  • r
    The Active Search example https://htmx.org/examples/active-search/ will it take the results and do an 
    outerHTML
    swap or how does that work?
  • l
    Is there a way to disable HTMX under certain conditions and perform a regular post request? I have this form with them aim to create a PDF. The form has an HTMX hx-post attached to it and when clicked, it basically creates a preview of the calculations. When the user is happy with it, I want it to make a normal POST request to create and return the PDF.
  • l
    I was thinking to remove/add the hx-post dynamically but that feels kinda hacky.
  • r
    Another thing I'm curious on. I'm creating a set of table filters on the left side of a html table. The filter will include 
    checkboxes
    , 
    inputs
    , and maybe 
    dropdowns
    . If I want to include those in my 
    hx-post
    or 
    hx-get
    request how can I get all of those and add them to the request? In either js or html.
  • m
    hx-include a parent element of all the inputs
  • m
    how does the user signal they are "happy with it"? It seems like a standard anchor tag to download the PDF would be fine. If you are boosting the links, you'll need to put 
    hx-boost="false"
    on that link.
  • m
    can you post the response HTML trimmed down to the oob and main content for me?
1...975976977...1146Latest