https://htmx.org logo
Powered by
# htmx-general
  • m
    Copy code
    html
<div ... 
     _="on htmx:afterSwap trigger done on #other-div"
     ...>
  ...
</div>

<div id="other-div" hx-trigger="done" ...>
  ...
</div>
  • m
    (this is using hyperscript, javascript is left as an exercise for the reader)
  • a
    hmmm I am getting an 
    Error: Expected event name
  • m
    can you post code and stack trace?
  • m
    ah, sorry
  • m
    Copy code
    html
<div ... 
     _="on htmx:afterSwap send done to #other-div"
     ...>
  ...
</div>

<div id="other-div" hx-trigger="done" ...>
  ...
</div>
  • m
    (programming hyperscript from memory on very little sleep)
  • a
    Thanks! that worked!
  • a
    Ha, this is what my 1st instinct always is as well (
    trigger done on #otherDiv
    instead of 
    send done to #otherDiv
    ). I wonder whether it’s because it “rhymes” with 
    on <event>:from #otherDiv
    ? Or perhaps it feels like if you can use 
    trigger event
    on the current element, why shouldn’t you be able to 
    trigger event on #otherDiv
    ? And yes, this is now a hyperscript channel again
  • m
    I'll overload trigger
  • a
    Wow. That’s the easiest “yes” I think I’ve ever got to a not-even-proper-feature-request 😁👍🙏
  • a
    any tips for injecting any form validation libs into HTMX ? - I like jquery.validate and parsely.js but not much info on the site other than making use of html5 form validation
  • g
    Hi, any suggestions on how to use htmx to do a page reload? On this project I have a JS script doing some validations, and if all is good, it does a page reload. I would like to do it in the same way the rest of the site is working (which is via htmx ). I tried with a button that is not visible to user. the button has an htmx-get attribute, and from my JS script I trigger a click on it. It works, doing a smooth page refresh. However, I see this error message 
    htmx:swapError
    . This error doesn't show up when I manually click on the button. I imagine there must be a better way to achieve what I want. Thank you!
  • m
    I would use a custom event, 
    verified
    for your trigger:
    Copy code
    html
  <form hx-trigger='verified' ...>
    ...
  </form>
  • m
    and then do your thing w/ the verification library and, if it is valid, trigger the 
    verfied
    event
  • m
    You could similarly use a custom event on the body
  • m
    Copy code
    html
  <body hx-trigger='refresh' ...>
     ...
  </body>
  <script>
     ...
     htmx.trigger("body", "refresh");
     ....
  </script>
  • m
    no need to use a button/click event
  • m
    would be interested in seeing the error created though
  • g
    Thank you! That little code helps me understand how events work. I'll give it a try.
  • m
  • g
    And this is the error object :
    Copy code
    {
  "errorInfo": {
    "error": "htmx:swapError",
    "xhr": {},
    "target": {},
    "requestConfig": {
      "parameters": {},
      "unfilteredParameters": {},
      "headers": {
        "HX-Request": "true",
        "HX-Trigger": null,
        "HX-Trigger-Name": null,
        "HX-Target": null,
        "HX-Current-URL": "https://outset_craft.nitro/"
      },
      "target": {},
      "verb": "get",
      "errors": [],
      "withCredentials": false,
      "timeout": 0,
      "path": "https://outset_craft.nitro/ ",
      "triggeringEvent": {
        "isTrusted": false
      },
      "elt": {}
    },
    "pathInfo": {
      "path": "https://outset_craft.nitro/ ",
      "finalPath": "https://outset_craft.nitro/ "
    },
    "elt": {}
  },
  "elt": {}
}
  • m
    htmx.trigger()
    is just a wrapper around the normal javascript api to make it easier to dispatch events
  • g
    And the button itself
    Copy code
    <button class="pageReloader" aria-hidden="true" hx-push-url="false" hx-get="https://outset_craft.nitro/ " hx-select=".site" hx-target=".site" hx-swap="outerHTML swap:0.5s settle:0.5s" hx-indicator="#loader">
  • m
    if you have hyperscript, it's easier than in js
  • m
    a swap error should occur when an exception happens, is there a stack trace in the console?
  • m
    yeah, looks like maybe 
    .site
    doesn't exist?
  • m
    the target is empty
  • g
    This is what I see:
    Copy code
    ut https://unpkg.com/htmx.org@1.6.0:1
    lt https://unpkg.com/htmx.org@1.6.0:1
    ot https://unpkg.com/htmx.org@1.6.0:1
    r https://unpkg.com/htmx.org@1.6.0:1
    (Async: setTimeout handler)
    Gt https://unpkg.com/htmx.org@1.6.0:1
    onload https://unpkg.com/htmx.org@1.6.0:1
    (Async: EventHandlerNonNull)
    Zt https://unpkg.com/htmx.org@1.6.0:1
    Zt https://unpkg.com/htmx.org@1.6.0:1
    d https://unpkg.com/htmx.org@1.6.0:1
    onload https://unpkg.com/htmx.org@1.6.0:1
    (Async: EventHandlerNonNull)
    Zt https://unpkg.com/htmx.org@1.6.0:1
    i https://unpkg.com/htmx.org@1.6.0:1
    fetchResponse https://outset_craft.nitro/:287
    doFetching https://outset_craft.nitro/:262
    (Async: promise callback)
    doFetching https://outset_craft.nitro/:262
    knock_knock https://outset_craft.nitro/:197
    (Async: EventListener.handleEvent)
    knock_knock https://outset_craft.nitro/:190
    <anonymous> https://outset_craft.nitro/:338
    <anonymous> https://outset_craft.nitro/:340
  • m
    :/ well that's not super useful. Thanks javascript.
1...398399400...1146Latest