https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • o
    why does 
    hx-swap="beforeend"
    duplicate the response in this example? https://jsfiddle.net/rtncv62o/
  • r
    Interesting
  • r
    Looks like a bug, specific to demo script
  • o
    oh well
  • o
    Also, swap/settle should work for hx-swap-oob if it allows any valid hx-swap value, right? So I could theoretically have the response have
    Copy code
    html
<div>
...
</div>
<img hx-swap-oob="delete swap:1s, #myimage">
    if I want to delete the 
    #myimage
    element 1s after the request is swapped in?
  • c
    Would be interested in your solution if you could share the hyperscript code. Need to learn a bit more hyperscript.
    i
    • 2
    • 20
  • c
    Did this work? I’m currently planning to do some testing with swap modifiers with OOB swaps.
  • o
    Not in the jsfiddle demo, no. Though with that earlier example failing I'd blame it on the test environment. I didn't check in a normal site yet.
  • c
    Sounds good. Thanks for the quick reply.
  • o
    Unfortunately doesn't seem like it.
  • f
    in HTMX, how do I "Configure any AJAX calls that POST data to my server to pass the authenticityToken from the as an X-CSRF-TOKEN HTTP header.
  • f
    ... my form is <form action="/examples/edit" hx-put="/examples/1" hx-target="#htmx-container" method="post"> ... Name Save
  • o
    this seems to work:
    Copy code
    html
<div hx-trigger="click" hx-get="/" hx-swap="none"
  hx-headers="js:{ 'X-CSRF-TOKEN': document.querySelector('meta[name=\'csrf-token\']').content }">
  Click me
</div>
    although not pretty
  • c
    Could it be that the OOB doesn’t like the target being added with the comma? Just setting the target on the element and then doing hx-swap=“outerHTML swap:1s”
  • o
    That also produces an error 
    1s is not a valid selector
  • c
    Which version of HTMX?
  • c
    This would be a good add of if it doesn’t work as getting css animations to work with OOB swaps would be very useful.
  • o
    1.8.5
  • c
    Going to test this more this afternoon rather than asking you to do it ha.
  • o
    lmk how it goes anyways
  • o
    alternatively one could write a middleware for some htmx event idk
  • b
    Cool. Took a little more time than I wanted, but I've got a simple expressjs project using typescript + prisma + ejs + htmx + tailwind.
  • c
    Confirmed. The docs do say any valid swap value but it seems to only be the main values and not the modifiers.
  • o
    😦
  • c
    Yeah, bummer for now.
  • f
    Not sure where to post it, but was a) looking at backend options outside my normal ecosystem, and b) reading the template fragments essay linked on the html_org twitter this week. TLDR I found another template fragment implementation to add to the list in that essay. https://laravel.com/docs/9.x/blade#rendering-blade-fragments
  • f
    I see it’s already been linked in #939530480636809227, I don’t know why I didn’t think to look at that first, other than that I just don’t go to that channel because I don’t normally work in php. Anyway, the essay linked here to submit new implementation for inclusion in the list, so I did.
  • b
    I'm getting a strange error when using the browser back button. Haven't done anything super complicated yet, just navigating between a couple pages targeting a 'main' div.
    Copy code
    libs.js:1908 Uncaught TypeError: Cannot read properties of null (reading 'dispatchEvent')
    at triggerEvent (libs.js:1908:35)
    at restoreHistory (libs.js:2073:17)
    at window.onpopstate (libs.js:3382:21)
    I set a breakpoint in restoreHistory and it looks like getDocument().body is null. Any ideas?
  • m
    how could document be null?
  • b
    document isn't null, but body is
1...101710181019...1146Latest