https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • f
    I could not find a way to swap a widget's contents without re-adding it
  • f
    but perhaps... I could just htmx swap to inside the widget?
  • f
    I don't think gridstack liked it when I tried but this was before I knew about process()
  • w
    I did not have success with swapping directly to the gridstack item. Found, same as you, that gridstack doesn't like it. the gridstack events don't fire properly. that is what I though you were originally asking about. As for size and position, I'm tracking X,Y,W,H per widget on the server side and setting those values in the HTMX Response Partial before sending it. I'm also persisting those and other values server side, per widget, so that when you return to the page, the widgets all load with the correct values
  • p
    Any ways to instruct HTMX to invalidate it's cache?
  • p
    I've got another course of possible action put that would have been a pretty drastic but easy way 🫣
  • m
    Do you need to do it dynamically, or is it for a specific page?
  • p
    2 links on the same page should ideally flush the whole thing
  • m
    OK, we currently don't have this, but you can nuke the localStorage entry: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L1892
  • m
    I need to improve programmatic access to this
  • m
    I also, unfortunately, need to make a living
  • m
    😑
  • p
    That's a reasonable way to do it. Thanks.
  • s
    What is the best way to handle page specific JS where the page content is loaded using htmx? One thing is running the JS, another thing is getting rid of the JS when new content is loaded.
  • m
    I like the AlpineJS approach
  • m
    @mysterious-toddler-20573 do you/have you used HTMX with Web Components Library such as LitElement?
  • m
    i have not
  • m
    I don't think htmx is a good fit for things like a tag input textbox for example
  • m
    seems that if htmx is loaded and I fetch a new fragment to replace a static component then I can fallback to the old static or htmx enabled component if the js for the web component failed to load
  • m
    because it's within the custom element
  • m
    🤔
  • m
    and if htmx failed to load... it will still have the default static component
  • p
    Not so stupid, I just had the same issue and your remark helped me out!
  • p
    It is possible to tell htmx to only send a GET request if my search string is 2 characters or more for example?
    Copy code
    <input id="search-input"
                       name="q"
                       type="text"
                       class="focus:shadow-outline block h-8 w-64 rounded-full border-gray-300 bg-gray-800 pl-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                       placeholder="Search"
                       hx-trigger="keyup changed delay:500ms"
                       hx-target="#search-results"
                       hx-swap="outerHTML"
                       hx:get="@{/movies/search}"
                />
    Trying to build an active search demo. I can handle it on the server as well, but it would be nice if I could somehow avoid the call in the first place.
  • p
    A second question is about custom styles for htmx-indicator. I tried adding this:
    Copy code
    .htmx-indicator{
        opacity:0;
        transition: opacity 100ms ease-in;
    }
    .htmx-request .htmx-indicator{
        opacity:1
    }
    .htmx-request.htmx-indicator{
        opacity:1
    }
    To have a faster transition, but I see it is not being applied. The reason is that my custom CSS loads first and then htmx adds this 
    <style>
    part below my CSS, which overwrites my own styles. Is there any way to make that work?
  • m
    hmm. I just use a spinner
  • m
    so it doesn't matter have fast it shows up
  • m
    Like this
  • m
    Copy code
    .error-icon {
        display: inline;
        opacity: 1;
    }

    .htmx-request .error-icon {
        display: none;
        opacity: 0;
        transition: opacity 1s ease-in;
    }

    .loading-icon {
        display: none;
        opacity: 0;
        transition: opacity 1s ease-in;
    }

    .htmx-request .loading-icon {
        display: inline;
        opacity: 1;
    }
  • g
    Any idea why using htmx.onLoad(() => { to load a Google Map loads half the time and doesn't the other?
1...807808809...1146Latest