https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b
    im on my vr headset right now lol
  • b
    quest 2 direct touch is pretty cool
  • g
    wanna move to #974086000307499028
  • g
    ?
  • b
    yes
  • m
    I got to use HTMX on a project at work and it’s made it SO simple. We use ASP.NET and I wanted some interactivity without tons of JavaScript. My coworkers are all surprised at how simple it was to set up too
  • g
    the simplicity of adding a single 
    <script>
    tag was almost lost in the mists of time
  • w
    Hey everyone, I started researching htmx a bit. One problem we currently have with turbo/stimulus is that we cant get a proper "confirm to navigate away" thing going. ie. turbo provides no hooks to prevent all types of navigation. Is that something htmx handles better ? The reason I ask is that it seems htmx also uses the history.push state api and afaik there is no way to cancel these push/pop state events.
  • r
    Re: Turbo, you can probably do it with: But if you have a desire for more control/granularity without plugins/modifying core, htmx could be a better fit- you can do the event thing here , or do it inline with 
    hx-on
    , or use`hx-confirm`
  • r
    a few patterns to choose from in htmx land.
  • w
    I dont think its possible with turbo. Afaik a back button click will fire a pop state event at which point its too late to do anything about it. That is the reason I am asking. How married is htmx with the history api?
  • r
    Oh, hm, that's deeper than expected, not sure, maybe someone else can help.
  • r
    For something that advanced, I'd look at htmx.js to see what events the history api fires, and listen for those.
  • r
    A strategy I use in my own apps, is just to temporarily save the contents of editors to local data every few seconds, so if the user clicks back, all good.
  • r
    then you can just clear it after an hour, or if a form submit happens.
  • b
    Hi everyone, is it possible to trigger a custom event with hx-on ? I am struggling with it. On the client On server (pyhon flask) response.headers['HX-Trigger-After-Settle'] = 'myCustomEvent'
  • m
    you could add an 
    htmx:confirm
    event handler at the body level to gate every request: https://htmx.org/events/#htmx:confirm
  • m
    yes, that should work
  • m
    my guess is that the event is not being triggered on the div in question
  • m
    response triggered events are triggered on the target element
  • w
    Does that take my next message into account ?
  • m
    so long as you don't use 
    hx-boost
    , the history API is opt in via 
    hx-push-url
  • w
    Thanks !
  • f
    Is there anyway to have 
    hx-push-url
    include the query params from the form on submit but still using the current url? Or is there another method for what I'm trying to achieve? The following results in the url 
    /posts?foo=bar
    but what I'd like is 
    /existing-url?foo=bar
    . Does that make sense?
    Copy code
    <form id="postform" 
      hx-get="/posts" 
      hx-push-url="true"
      hx-target="#postlist"
      hx-trigger="change">
  • b
    Get rid of the push-url? That should keep the existing one.
  • b
    Unless you need to add the query params. Then you’ll need some js I think.
  • f
    My form is on a page with the url 
    /my-form
    . The above code with hx-push-url included results in a url of 
    /posts?foo=bar
    after the form is changed. Without hx-push-url included I get 
    /my-form
    . What I'd like is 
    /my-form?foo=bar
    . Is that possible?
  • b
    I think you’ll need some js for that. Get the form submit event and grab the values and put them in the url. Pretty sure that’s not possible with htmx
  • f
    Ok thanks, that helps.
  • r
    You can use HX-Push-Url response header https://htmx.org/headers/hx-push-url/. Just set it on the server
1...110411051106...1146Latest