https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m

    mysterious-toddler-20573

    12/16/2020, 3:26 AM
    \> tfw
  • m

    mysterious-toddler-20573

    12/16/2020, 3:26 AM
    😑
  • g

    gorgeous-ghost-95789

    12/16/2020, 4:19 AM
    😋
  • g

    gorgeous-ghost-95789

    12/16/2020, 5:17 PM
    Sometimes I just flood the pull requests, just to see @mysterious-toddler-20573 scramble 😄
  • m

    mysterious-toddler-20573

    12/16/2020, 5:41 PM
    my secret is that I'm always scrambling
  • g

    gorgeous-ghost-95789

    12/17/2020, 2:35 AM
    This is an extremely early proof of concept, with major shortcomings still to be resolved. However, here's a video of using htmx to dynamically load slides into a slideshow and navigate forward and backward through it.
  • g

    gorgeous-ghost-95789

    12/17/2020, 2:38 AM
    My goal is to make this "general purpose" enough to work as one of the navigational foundations of a web app. The biggest issues right now are: - The back button is a lie. Working with history is going to be a big deal. - Right now it's fixed height. A general purpose solution will work with any sized pages. - Too much boilerplate. Once I have something that actually works, I'll try to make it easier to manage.
  • c

    colossal-advantage-10960

    12/17/2020, 2:46 AM
    Would
    hx-boost
    give you back button functionality?
  • g

    gorgeous-ghost-95789

    12/17/2020, 2:47 AM
    I'm looking in to that now. The way this is built (currently) is a bunch of DIVs all stacked on top of each other. I'll need to figure out how to find the URL for the previous page, load it into one of the DIVs, then animate.
  • g

    gorgeous-ghost-95789

    12/17/2020, 2:48 AM
    I think (hope?) it's doable. It'll just take some more work to make it go.
  • m

    mysterious-toddler-20573

    12/17/2020, 2:49 AM
    nice!
  • m

    mysterious-toddler-20573

    12/17/2020, 2:50 AM
    can't wait to see the code
  • g

    gorgeous-ghost-95789

    12/17/2020, 2:50 AM
    No really. You want to wait to see the code.
  • m

    mysterious-toddler-20573

    12/17/2020, 2:50 AM
    i look forward to seeing the code
  • g

    gorgeous-ghost-95789

    12/17/2020, 2:50 AM
    Right now, it will make you sad.
  • m

    mysterious-toddler-20573

    12/17/2020, 2:50 AM
    at the appropriate time
  • g

    gorgeous-ghost-95789

    12/17/2020, 4:16 AM
    Ok, dumb question.. I'm trying to identify the event source using the following element :
    Copy code
    html
    <div id="stack" 
            hx-push-url="true" 
            hx-get="1.html" 
            hx-trigger="load" 
            hx-target="#stack" 
            hx-swap="beforeend"
            _="on htmx:load call forward(event)"></div>
    Right now,
    event.target
    and
    event.source
    both point to the new DOM node that's loaded with
    1.html
    . I'd like to be able to differentiate between fragments that are loaded directly by this tag vs. elements that are put into this container afterwards. Does this question make sense?
  • g

    gorgeous-ghost-95789

    12/17/2020, 4:21 AM
    Would it be possible to include the element that initiated the Ajax call in the event data?
  • g

    gorgeous-ghost-95789

    12/17/2020, 6:25 AM
    Also: https://github.com/benpate/htmx-slide-navigation
  • m

    mysterious-toddler-20573

    12/17/2020, 1:40 PM
    This extension includes the entire event serialized as JSON: https://htmx.org/extensions/event-header/
  • g

    gorgeous-ghost-95789

    12/17/2020, 7:14 PM
    Hey @mysterious-toddler-20573. Thanks for this. I checked it out, and I think there is still something more that I need. I'll try to write up a GitHub issue, which will probably be a better place to discuss this in more depth.
  • h

    helpful-secretary-3515

    12/17/2020, 8:26 PM
    hello! i use HTMX to avoid a page reload and it works fine. but when it comes to stuff that needs Javascript (f.e. a favorit button that gets red, after a click) , it has to be reloaded (started) it does not work. is there a way to start (restart) my JS-Code ? i use htmx in this way : .
  • g

    gorgeous-ghost-95789

    12/17/2020, 8:31 PM
    Howdy @User - there are several ways, depending on what you're doing. You can call the
    htmx.process()
    function to re-process a set of nodes. Do you have more sample code you could share?
  • m

    mysterious-toddler-20573

    12/17/2020, 9:00 PM
    @User hard to tell without code, but the favorite button should ideally post (or put or whatever) to a URL, that returns a new version of the button, with a class that will render it as red
  • g

    gorgeous-ghost-95789

    12/17/2020, 9:27 PM
    👆 This is the correct answer.
  • h

    helpful-secretary-3515

    12/17/2020, 10:53 PM
    thats it! THANK YOU! 🙂 i use python (django) and that seem to be a fantastic solution.
  • m

    mysterious-toddler-20573

    12/18/2020, 12:01 AM
    🙂 excellent to hear
  • h

    helpful-secretary-3515

    12/18/2020, 12:51 AM
    please take a look here. https://codepen.io/zen8/pen/yLaXyGj. it works , but when you click on the button "HTMX MAGIC" , the missing of JS (sorting , bring it in shape) makes it unfunctional.
  • m

    mysterious-toddler-20573

    12/18/2020, 1:02 AM
    Hmmm. Hard to see what's going on, but it looks like you have a bunch of javascript that is executed when the page loads. When you bring in new content via htmx, it isn't going to be hooked up. So what you might need to do is, when new content is loaded via htmx, initialize it with your javascript libraries: https://htmx.org/docs/#events
  • m

    mysterious-toddler-20573

    12/18/2020, 1:03 AM
    I need to create an example of this situation, it bites people frequently
1...102103104...1146Latest