https://htmx.org logo
Powered by
# htmx-general
  • b
  • p
    I am playing with HTMX for the first time and I want use it to "fake" an SPA feeling by having my navigation items replace the whole current page. So I changed from 
    <a href="..."
    to 
    <a hx-get="..." target="html">
    but that does not seem to work. The page looks like the CSS is not loaded anymore. Should this work or not?
  • m
    you probably want your 
    hx-target
    to be 
    body
  • p
    Wow, that works fine indeed! 👍
  • m
    also, you could use the 
    hx-boost
    attribute to make links and forms act "ajaxy": https://htmx.org/attributes/hx-boost/
  • m
    thank you!
  • p
    Interesting, but it does not seem to work properly if I just add this on my 
    <body>
    . Maybe because I also am using Alphine.js in the application.
  • p
    Putting it on a 
    <div>
    "lower" in my HTML tree does make it work. But it breaks when using the back button of the browser.
  • p
    It's a little tricky as I think it might be CSS related (i.e. with fixed layout) but I'll see what I can do
  • p
    Would it be possible to use IntersectionObserver with fallback to scroll if the API is not available?
  • p
    if("IntersectionObserver" in window){
  • m
    it could be, I will need to investigate. I am slammed at work for the next two weeks, but then will have more time for the open source stuff
  • p
    btw I think this might be one reason the hotwire ppl don't support IE11, as IntersectionObserver is core part of their library
  • m
    true story
  • n
    Hi all. So... I'm working on adding a 
    div
    to a page that will render the current version of our app. I want to have that 
    div
    automatically refreshed every X minutes via 
    htmx
    . I'll use the information we're rendering there to display the user a message stating they have an old version with an invitation to click a link to refresh the page and load the latest version. I have it pretty much working with 
    hx-get="/version" hx-trigger="load delay:300s" hx-swap="outerHTML"
    . But now I'd like to only make the request if that page is the currently active browser tab. Any ideas?
  • g
    You could have it trigger on a custom event, then write some js to implement your custom rule.
  • g
    Is it possible for us to tell if it’s the currently active tab or not?
  • g
    Looks like “yes” — with some work.
  • g
  • n
    Yeah. That solution uses jQuery, but I think the 
    visibilityState
    property is quite standard these days and I could use that: https://caniuse.com/?search=visibilitystate
  • n
    That being said, I was hoping I could do this without having to add any custom JS 😢
  • g
    Yup. There were a couple of methods mentioned. Apparently you can listen for 
    focus
    and 
    blur
    events on the window.
  • n
    Thanks for the pointers, @User!
  • n
    If anyone else has ideas today or tomorrow, I'd be open to hearing them. thanks!
  • n
    the least custom JS, the better 🙂
  • n
    Apparently, I should be able to trigger the reload of the div with 
    hx-trigger="visibilitychange"
    , or even something like 
    "hx-trigger"="load delay:30s, visibilitychange"
    , but it's not working. Not even throwing an error. It simply doesn't trigger. 😦
  • n
    visibilitychange
    is an event triggered on the document by the browser anytime the document's visibility changes.
  • n
    Ok, I think the problem is that 
    visibilitychange
    is an event triggered on the 
    document
    and not in the 
    div
    I'm putting the trigger on. I thought I could use the 
    from:document
    event modifier but it fails because 
    document
    is not a valid CSS selector. Is there any way to use 
    from
    to listen on events being fired on 
    document
    ?
  • m
    is 
    document
    a valid css selector?
  • m
    looks like no
1...222223224...1146Latest