https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    @mysterious-toddler-20573 even JavaScript is not so easy to debug on the browser, but there is a decent stack trace and line number; in this error there was no clue, maybe you can display the expected target
  • b
    Should htmx be adding a 
    X-Requested-With: XMLHttpRequest
    header when making AJAX requests?
  • b
    Never mind, found the extension: https://htmx.org/extensions/ajax-header/
  • a
    Oh well this is funny: "We find hot new industry trends & then do the opposite of that..." from Big Sky Software web site
  • a
    🤣
  • m
    Hi I encountered an interaction between htmx and AlpineJS that really causes some head-scratching issues. Alpine uses @ as a shorthand for x-on:, so @click is the same as x-on:click. It seems like htmx isn't too happy about that, because Alpine inside a component won't initialize when the component is rendered, if you use @ syntax. The Alpine docs recommends using the @ shorthand. This also completely breaks the main functionality of hx-push-url, if you have any @ Alpine syntax in your body. The URL does change but you get an error when using back/forward and the page stays the same.
  • m
    Hi Kent, can you post some html code? I wonder if the @ is breaking some selectors
  • m
    @User I decided that htmx will emit both camelCase as well as kebab named events, so you can use either. camelCase is nice in programming environments like hyperscript, but to play better with Alpine and other systems that use attribute matching we will emit the kebab named event as well. Not too much code and it will make things easier for people.
  • m
    @User Will do tomorrow, heading home now sorry.
  • m
    If you could check the console to see if there are any clues what's going on that would be helpful too.
  • m
    A simple regression test is passing:
  • b
    @mysterious-toddler-20573 works for me, thanks for the info!! So can you confirm whether the current naming of events will continue to work?
  • m
    yes
  • m
    Yep, current naming will work, but for things like alpine, htmx:config-request will also work: https://github.com/bigskysoftware/htmx/commit/c3b1c63484cbee1618b1b59cee639015d9bc6421
  • b
    Sweeet!
  • b
    So a 0.1.0 is... right around the corner?!
  • m
    End of the month, w/ a target of 1.0 at the end of October
  • m
    I'm super slammed at work, but I want to get this out
  • g
    Awesome! I'm eager to help (hopefully without breaking anything too badly)
  • g
    Let me know where I can be most helpful to you, and I'm happy to put in some time. This next week is actually pretty light for me 🙂
  • m
    @User I need to get my head around the sse stuff and then we can talk
  • m
    I may want to reimplement it, just so I understand the code
  • m
    Here is my first thoughts, reading through stuff: 1 - I like a single sse connection declaration on a parent element, rather than sharing connections 2 - I think we could extend the 
    hx-swap
    attribute to capture swapping in content recieved from an SSE connection: 
    hx-swap='sse:someEvent'
    would mean when the 
    someEvent
    named event shows up in a parent connection, swap it in to me. Still thinking about this, but something like that makes sense to me. 3 - on unnamed SSE events I like the idea of doing an OOB swap, as with web services Those are just my inintial thoughts. Please let me know what you think.
  • m
    OK, read through stuff and I have put together a modest proposal: https://gist.github.com/1cg/5dd26530aeec92a9389b367747bbb5ee
  • m
    Error in console with @click from Alpine and htmx:

    https://i.imgur.com/BwyA3qA.pngâ–¾

    I have narrowed the issue down to when the element has both an "@click" attribute and an "id" attribute. I get the above error with this button on the page that I'm trying to go back to with the history feature.
    Copy code
    html
<button @click="test" id="test">
    As for Alpine not initializing when a component gets rerendered (Sprig) and @ syntax is used, I have no idea. Console is empty and it works just fine with x-on.
  • m
    Interesting
  • m
    Looks like some browsers, at least, don't like the @ in attribute names in at least some cases. The ID is crucial here because that's how we do attribute swizzling. I can create a regression test and see what we can do.
  • m
    I have only tested it in Firefox and Chrome, both had the issue.
  • m
    ok, I have a breaking regression test:
  • m
    I think we are going to have to ignore @ symbols for swizzling
1...252627...1146Latest