https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    Support for custom async confirmation dialogs, cleanest way I could think to implement it: https://github.com/bigskysoftware/htmx/commit/d16cf3c9bbaf70bb52cc75dcf592f0851554aa5e
    Copy code
    javascript
document.body.addEventListener('htmx:confirm', function(evt) {
    evt.preventDefault();
    swal({
      title: "Are you sure?",
      text: "Are you sure you are sure?",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((confirmed) => {
      if (confirmed) {
        evt.detail.issueRequest();
      }
   });
});
  • b
    @mysterious-toddler-20573 with head-support, is the point of merging to avoid reprocessing the existing elements? Like, as I’m playing with this, it seems cleaner to me to just recreate the head, but I guess even if the end result is an exact match, the behavior is not identical. Is that right?
  • m
    We are trying to minimize network traffic while still supporting the new head tag. For boosted stuff we do a merge, which leaves things "in place" if they are in both the new and old head. This is usually right for css, and mostly right for js, but there are times when you want to re-append JS.
  • m
  • w
    What does "multi-swap extension" mean? As in you can swap all instances of a class?
  • r
  • q
    May I set a value in a target from another element without using the Ajax step? E.g. I like to take the value of an INPUT field and write it to a DIV. Is that possible?
  • q
    And just an additional question: Using hx-target = "#test" I define the element with id="test" and there its inner-html as target. But is it also possible to define the attribute value of a specific element?
  • c
    I wonder if the "rerun this js" directive should actually be declared in the script tag itself. has that been considered? if that is the only mechanism ot could become too verbose but it gives absolute fine control on what reruns or not so it could be a complement to other approaches.
  • r
    htmx is specifically directed at client-server communications with hypermedia. If you want to handle client-only interaction, you should use JS scripting or htmx companion library _hyperscript https://hyperscript.org
  • q
    Will take a look at hyperscript - thx for this hint 🙂
  • r
    htmx operates at the scale of html fragments, not individual attributes. Depending on your use case, either consider using morphing libraries https://htmx.org/docs/#morphing, or, again, using client-side scripting
  • r
    Also, I may be completely wrong about morphing, I'm not using it myself so take this advice with a grain of salt
  • q
    Okay, I will 🙂 Thx 😉
  • b
    I’ve had this thought as well. Experimenting with this now.
  • b
    Oh…so it won’t re-run the js unless you use 
    createContextualFragment
  • g
    I've been waiting for multi-swap but I think I misunderstood the design intent... Is there a reason why it's only compatible with ID's? I was expecting it would be compatible with all the values/selectors supported by 
    hx-target
    , eg CSS query selectors. My use case here is that I've got the same button rendered in 2 or more places on the page -- I can use a CSS class like 
    button-{{id}}
    to target the both. frankly i'm a little surprised to see IDs in the 
    hx-swap
    tag at all... AFAIK historically that was only ever meant to describe swap strategies and not targets
  • m
    That’s how it works
  • q
    The response of the Ajax call is sent to hx-target or to the element that was triggered. Is it also possible that I only call a JS function on the response? Cause I like to update a Plotly chart and the Ajax response will be as Json file which I like to send to Plotly.update.
  • a
    @mysterious-toddler-20573 looks like my custom SWAL plugin works with that latest async change
  • a
    👍
  • a
    Copy code
    <button 
    hx-get="/test" 
    hx-ext="htmx-swal2" 
    hx-swal-confirm='{"title": "Hello world", "text": "Are you sure?", "icon": "success"}'
</button>
  • m
    make sure you 
    preventDefault()
    the 
    htmx:confirm
    event!
  • a
    yea
  • m
    but that looks absolutely awesome
  • m
    we should add it as an example
  • a
    still working on the refining the plugin
  • a
    but my test page works
  • a
    Copy code
    if (name == "htmx:confirm") {

            evt.preventDefault();

            let attrs = JSON.parse(evt.detail.elt.getAttribute("hx-swal-confirm"));

            Swal.fire({
                title: attrs["title"] || "Are you sure?",
                text: attrs["text"],
                html: attrs["html"],
                icon: attrs["icon"] || "warning",
                showCancelButton: true
            }).then((obj) => {
                if (obj.isConfirmed) {
                    evt.detail.issueRequest();
                }
            });
  • m
    perfection
1...883884885...1146Latest