https://htmx.org logo
Powered by
# htmx-general
  • f
    So anyone know how to get my mouse pointer finger press icon back now, or do I have to turn it back into a href rather than img?
  • f
    crap, I have some o fthese buttons embeedded in the table partial that gets returned on completion of request, unfortunately all those are also greying out until the top level request comes back 😦 back to teh drawing board
  • f
    even worse, they grey out even when the polled update runs, so every 15 secs they are going dark for a few moments 😦
  • f
    any tips on how to make this just an appllied sytle on img click for 1 second, instead of during request service, I can settle for that.
  • f
    Meanwhile I will put this down for a few hours!
  • p
    Thanks man, I'll have to try it out.
  • m
    Move the poll down to the table header and use hx-target to target the table element. The the buttons won’t be enclosed in the element making the poll request
  • s
    Hey, when bundling htmx with esbuild my script breaks and i get the following warning [DEBUG] Using direct eval with a bundler is not recommended and may cause problems node_modules/htmx.org/dist/htmx.min.js:1:3676: 1 │ ...(e)}catch(e){ut(e);return null}}function e(e){return Ut(P().body,function(){return eval(e)})}function t(t){var e=D.on("htmx:load",function(e){t(e.detail.elt)});return e}... ╵ ~~~~ You can read more about direct eval and bundling here: https://esbuild.github.io/link/direct-eval
  • s
    I'm not sure if the suggested fix in that link is relevant but at least the following code doesn't seem to work when using esbuild: window.htmx = require('htmx.org'); htmx.config.historyCacheSize = 0;
  • f
    solved my mouse pointer issue by simply adding cursor: pointer; to my css. This works for all buttons. Have not worked out a sustainable way for preventing the button state changing in table when the htmx requests are in flight ( rather than only when they are specifically pressed ) but what I have is far better than where I started...
  • f
    The table rows are programatic, can I use jinja2 variables to churn the naming convention to specific rows
  • g
    This will be client-side logic. Try some hyperscript, something like 
    <button hx-post=“” script=“on click set [@disabled=true]”>
  • g
    used htmx for an assignment today
  • f
    @User remember the HTMX Unloading you explained to avoid duplicate JS widgets? How do you deal with going back and the only the HTML-
    partial/fragment
    loaded via HTMX is being displayed? https://i.imgur.com/pV1CyMK.mp4
  • a
    Well, we always initialise JS widgets in an htmx onLoad event handler:
    Copy code
    htmx.onLoad(function(elt) { 
      createWidgets(elt);
});
    That way, no matter whether its the first page load, or on the onload when we go back (i.e. a partial), it gets process again. Is that what you're after?
  • f
    Yeah; noted that back then. Isn't this the only-
    fragment
    displaying a different issue though? Thought since it's somewhat related to the JS widgets (having to do with history etc) you might've ran into it too.
  • a
    Oh we've run into all kinda weirdness with JS widgets and history 🙈 😅 But on back, remember htmx will snapshot into the targeted history element container, the history snapshot it took. It defaults to body I think, but we specifically indicate it on a stable div inside body
  • a
    I.e.
    Copy code
    <div id="content" hx-history-elt="true">
  • l
    This was one of the benefits I realized with htmx. Gone was the requirement to match my server API objects (usually defined in F#) to the SPA's object (JS or TypeScript). All the client has to do is display what the sever sends it. (On a side note - I had been using JWTs for so long that I forgot how well cookie auth "just works"... LOL)
  • a
    Its only if you've gone too far back, or configured htmx not not store history or always reload from source, that it will do that, but then it will request the whole page normally
  • f
    Yeah, I'm aware of that – thought it's snapshotting the page's 
    body
    (since the 
    fragment
    doesn't have/require any) that the default 
    hx-history-elt
    setting should be just fine. It seemed to me this tag was only required when you want to customize snapshotting for a super advanced use case. Any idea on how I can force full page reloads when navigating?
  • a
    Sorry, I missed the partial getting dumped as-is on the screen in the last step of your screen recording. That doesn't seem right... 🤔
  • a
    You mean force full page reloads when you go back?
  • a
    If you want to force a hard refresh on back, you can set the htmx.config.refreshOnHistoryMiss config variable to true
  • f
    Yes. Might make it easier for now. Tried disabling bfcache (Backward-Forward Cache) with subpar success
  • s
    I wish htmx history wasn't default on, I feels like some unexpected magic that is going to trip people up and be a potential security issue by leaving data in the browsers local storage.
  • a
    That is a fair point @User.
  • f
    I think that works; thanks! Weird though I still have to unload the JS widgets. Expected it would also release me from the duty of having to do that manually.
  • m
  • m
    set 
    historyCacheSize
    to 0
1...499500501...1146Latest