https://htmx.org logo
Powered by
# htmx-general
  • g
    Depending on how many bootstrap widgets you are already using, you might consider writing your own event handlers for the modal dialogs. Bootstrap isn’t really doing much here, and the open/close animations are really easy to replicate.
  • g
    It’s like four lines of JavaScript or two lines of hyperscript to make it work 😎
  • f
    Oh I'm doing it all with the custom javascript (mostly lifted from the example). The problem was trying to chain it all together, hit a button, have a modal popup, gather some information then submit the original form.
  • f
    I can get the button to trigger a modal no problem (using 
    htmx.ajax
    ), but then when the modal gets closed I need to submit the form out of band and triggering an 
    htmx.ajax
    with a 
    POST
    and the form context is beyond me.
  • g
    I got you fam.
  • g
    I have the same situation on my app. Here's what I did.
  • g
    Just submit the form via htmx. Don't close the modal, because it's still working. You can even show a little spinner if it's going to take more than 100ms.
  • g
    When your server responds, include an 
    hx-trigger
    response header to trigger an event to close the modal dialog.
  • g
    I use this event everywhere, because there's several things that could all close the modal, and it's easiest to have each of them just flow through that one event.
  • g
    I use this code specifically: 
    HX-Trigger:{"closeModal":{"nextPage":"/url-goes-here"}}
  • g
    Then, the 'closeModal' event handler runs the "closing" animation, then removes the modal.
  • g
    If the "nextPage" parameter is present, then I forward the browser to the requested URL.
  • g
    Does this make sense to you? Let me know if you need more specifics 🙂
  • f
    you send the 
    HX-Trigger
    with the response? Interesting. hmm why bother closing the modal if you are redirecting the page?
  • g
    Because it makes the animation pretty 🙂
  • g
    Plus, many instances might want to stay on the same page, and just update some content via htmx or an oob-swap
  • f
    Interesting strategy of submitting the form via the modal. I'm looking at that now, the only complication for me is that I need to pickup some inputs from the original form (that opened the modal) to go along with it.
  • f
    True. htmx has reduced my use of 
    next
    to nearly 0
  • g
    Here's my modal code (in hyperscript) in case it's helpful
    Copy code
    on click from .modal-underlay 
    send closeModal to #modal

on closeModal(event)
    add .closing to #modal
    set window.location to event.detail.nextPage unless no event.detail.nextPage
    settle
    remove #modal
  • g
    Yeah, one size does not fit all. But hopefully my approach gives you a jump start on one that will fit you.
  • f
    ....can you chain multiple hyperscript events together in a single 
    _=""
    block? Well that changes things
  • f
    That is super helpful
  • g
    This code is loaded separately via 
    <script src="" type="text/hyperscript"></script>
  • g
    it's just adding global event handlers instead of the new "behaviors" but it works great so far.
  • f
    ahh okay makes sense
  • g
    But yes, you can dump a whole pile of code into a single 
    _=""
  • g
    And now, I've succeeded in bleeding hyperscript into the htmx forum (again)
  • f
    haha you can safely blame me. They are related...
  • g
    They are awesome together. I really need to make a full-scale demo, once my app is even remotely presentable.
  • g
    I hope you're able to do the same once you figure out the pattern that works best for you.
1...309310311...1146Latest