https://htmx.org logo
Powered by
# htmx-general
  • m
    lol, ben is writing better hyperscript than me what the fig
  • g
    That's only because I'm using imaginary hyperscript that doesn't exist yet, while you're still stuck in the present 😉
  • m
    Copy code
    on click from #themeToggler
    toggle @href between "/static/css/0x-light.css" and "/static/css/0x-dark.css"
    set cookie "theme" to @href expiring 1 year from now
end
  • m
    the toggle is nice, I forgot you could do that
  • m
    but the if statement above will work today
  • m
    If you need help just ping me
  • s
    You are all stuck in a pre tailwind world 😄
  • b
    hello, Me and my employer found htmx is very interesting. We decide to convert our web from unpoly to htmx. Everything goes well 👍 But, now I have a problem with cancel/reject an AJAX request when it reaches a timeout. It seems the current 
    htmx.ajax()
    doesn't have a timeout feature. following is my use case :
    Copy code
    - call htmx.ajax('/verify-address'), with a timeout 10s
- when it hits the timeout, then it wil call htmx.ajax('/verify-address-timeout')
    as a workaround, I use 
    window.setTimeout()
    , but the problem is I don't have any idea on how to cancel/reject the previous request
    Copy code
    const formData = htmx.values(formEl);
let verifySuccess = false;
htmx.ajax('GET', `/ajax/postiecustom/verify-address?${CommonHelper.objectToQueryString(formData)}`, '#modals-container')
    .then(() => {
       console.log('validation is shown!');
       verifySuccess = true;
    });

// if verify is not success after timeout (6s)
//    then reject the previous request
//    then request modal timeout
window.setTimeout(() => {
  if (!verifySuccess) {
    // TODO - have to find a way to cancel the previous modalContent
    htmx.ajax('GET', '/ajax/postiecustom/verify-address-timeout', '#modals-container')
    .then(() => {
       console.log('validation timeout is shown!');
    });
  }
}, 6000);
  • b
    this would be handy if 
    htmx.ajax()
    has 
    timeout
    params in the future,
    Copy code
    htmx.ajax('GET', '/first-request', '#selector', { timeout: 6000 })
    .then(() => {
        console.log('validation is shown!');
    })
    .catch(() => {
        htmx.ajax('GET', '/timeout-request', '#selector')
            .then(() => {
                 console.log('validation timeout is shown!');
            });
    });
  • p
    Has anyone had issues getting hx-trigger="revealed" to work? I've been trying to use it for a couple cases but it seems to just trigger for the elements appearing in the viewport on initial load, but not when an element scrolls into view
  • s
    "revealed" worked for my little example: https://github.com/guettli/django-htmx-fun Sorry, I have no live demo around, you need to install and run it.
  • p
    Yes I used the same settings (hx-get="..." hx-trigger="revealed" hx-swap="outerHTML")
  • p
    which does work, but only for the immediate load, not subsequent scrolling
  • p
    tried the debugger - it showed events being triggered for elements in the viewport at first load, but nothing thereafter, suggesting that the scroll event was somehow broken
  • m
  • m
    it should load "Here is more content for this page, loaded 'remotely'" into divs as you scroll down
  • p
    Test works, sure (as does the infinite scroll example in the docs). The issue is clearly with my code, but I cannot see what.
  • p
    It might be related to the way scrolling is working on my page, for example I have a fixed side navigation panel on one side, so perhaps that is interfering with how the scrolling is triggered.
  • p
    wait does "revealed" rely on scrolling vs IntersectionObserver?
  • p
    if the former that might be why it's broken
  • p
    if it relies on scrolling to trigger
  • m
    yep, that's almost certainly the issue. We can't use intersection observer because it isn't IE11 compatible. Can you give us a stripped down version of your code so we can look into supporting it?
  • m
    that's a reasonable suggestion, would you mind logging a github issue for it?
  • e
    Is there a way to get htmx to scroll to the top of the page after content is swapped in? I see 
    hx-swap="innerHTML show:top"
    and 
    hx-swap="innerHTML scroll:top"
    but those don't seem to scroll to the top of the page. Instead they scroll to show the top of the element and scroll the element overflow to the top, respectively. I want something that will scroll the viewport all the way to the top
  • m
    i don't believe so, but there should be
  • m
    let me look
  • m
    confirmed
  • m
    please log an issue, we should support 
    scroll:windowTop
    and 
    scroll:windowBottom
  • e
  • b
    sure, I will gladly post a github issue
1...221222223...1146Latest