https://htmx.org logo
Powered by
# htmx-general
  • g
    You could also add a global event handler to the window to do this:
    Copy code
    <body script="on htmx:load call tippy.init(target)">
  • g
    etc.. does this make sense?
  • f
    Yes this is exactly what I was hoping for. Thank you.
  • f
    Is the only place 
    htmx:load
    should go is in the body tag, or can I place it somewhere else and still have it run?
  • g
    Yeah, I was just being sloppy because I didn't want to look up the "correct" way in Javascript.
  • g
    It's probably best to make a separate script that registers the event handler. Hold on..
  • g
    This is probably the better way:
    Copy code
    html
<script>
    document.addEventListener('htmx:afterSwap', (event)=> { 
        doTheTippyStuffHere()
    })
</script>
  • g
    * Check out the event reference on the website (https://htmx.org/reference/#events) I think "afterSwap" is probably the event you want to listen for.
  • f
    Awesome, thank you so much.
  • m
    preserve preserves the whole element, and all the stuff underneath it
  • m
    basically it just doesn't replace that element in the DOM, so everything else underneath is is preserved as well
  • f
    Ahhh.... so while it's not inherited, it basically is?
  • f
    I was really just trying to keep the class state of the parent element (collapsed/visible), so I'll just need to find another strategy
  • r
    Gfx game on point
  • l
    It seems like this was discussed, but I can't find/remember the answer. Is there a straightforward way to apply CSS transitions to the removal of 
    .htmx-request
    ?
  • i
    You can just add some css like ``.htmx-request {opacity: .5; transition: opacity 600ms linear;}`` to your css file and call it good
  • i
    I'm running into an issue with dynamically loaded content. I'm adding a sortable list using something akin to this: https://htmx.org/examples/sortable/ My understanding of htmx.onLoad was that this would let it run against newly added content. Iif I add a console log, I see that it IS fired after the content is dynamically loaded. For some reason though, the result is still that dynamically loaded content isn't sortable. Update: Fixed it. Had to change from this:
    Copy code
    htmx.onLoad(function(content) {
    var sortables = content.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
      var sortable = sortables[i];
      console.log(sortable);
      new Sortable(sortable, {
          animation: 150,
          ghostClass: 'blue-background-class'
      });
    }
});
    to
    Copy code
    htmx.onLoad(function(content) {
    var sortables = document.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
      var sortable = sortables[i];
      console.log(sortable);
      new Sortable(sortable, {
          animation: 150,
          ghostClass: 'blue-background-class'
      });
    }
});
  • s
    Has anyone created a simple 
    React
    component that applies 
    htmx.process()
    to the html it wraps? Looking to offer a migration option for some app code.
  • r
    Nope but it would be a smashing idea for someone to come up with a React ➡️ htmx Migration Guide.
  • r
    (Not familiar enough with React myself)
  • b
    Copy code
    const HTMXify = ({ children }) => {
    const ref = useRef();
    useEffect(() => {
        if (! ref.current) return;
        htmx.process(ref.current)
    }, [children])

    return <div ref={ref}>{children}</div>
};
    Just wrote this didn't test it, should be close to correct. CC @calm-ice-23682 because you 👀 'd this
    s
    • 2
    • 1
  • s
    ```
  • b
    Hi all
  • b
    I have a question regarding indicators: I have an instance where a select does a 
    get
    req, which will populate a different part of the page. How can I show a loading indicator for this? From what I can tell, the 
    .htmx-request
    class is placed on the select, and so I don't have a way to reliably hide the existing content (the target), show the loading indicator, then hide the indicator and show the new content - I'm using 
    display: none/block
    for these btw. Thanks!
  • m
    I've done such a migration. I found no other way than rewriting everything as if it was a new project. The only thing I could reuse was some of the CSS copied/pasted from browser devtools. The logic is too different to consider that kind of project as a "migration".
  • r
    Hi! You can do this with https://htmx.org/extensions/loading-states/ extension. In particular, you probably want to use 
    data-loading-class
    or 
    data-loading
    attributes with custom styles to hide your elements. It also allows to set custom target element with 
    data-loading-target
    attribute, which seems like exactly what you need. For more complex use-cases, you can hook into htmx events with hyperscript (or Alpine. Or vanilla JS) and update required styles as you wish
  • b
    Ah perfect, thanks for that - I'll take a look. I'm trying to see if it's possible to avoid using custom JS tbh, and keep everything in the markup 🙂
  • r
    In that case, 
    loading-states
    would be you best bet 😄
  • b
    Thank you, I knew there had to be a way to accomplish what I was looking for without resorting to JS just for this 😁
  • s
    @mysterious-toddler-20573 If you are dong any open sourcery this morning. I would like to promote https://github.com/bigskysoftware/htmx/issues/436
1...697698699...1146Latest