https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • n
    is htmx the right tool to implement a web app that requires drag and drop and serveral interactive behaviours? Lets say its a tool to draw graphs, so i need to draw objects, snap arrows between those objects etc etc
  • n
    do you guys think thats the kind of app that may be better with react?
  • r
    I will not advocate for any specific library, but yes, this kind of rich client side interactions will require client side scripting, be it vanilla JS, jquery, web components, _hyperscript or The Frameworks. Rich client side interactions are kind of out of scope of htmx, which focuses on the higher level of organization and interactions with the server
  • r
    That said, you don't have to write you entire app with one library. Your editor component could be implemented with the library of you choice as isolated module and then embedded in the page or sent as a partial update for htmx request
  • e
    Hey every1, Where can I find a list of triggers?
  • m
  • e
    all of the ones under "Element" right? not the "Document" specific ones?
  • e
    Also trying to wrap my head around the trigger syntax with filters https://htmx.org/docs/#trigger-filters I see in the docs ctrlKey and shiftKey i see you can even have your own function but does a list of these filters in the system exist or are these two the only ones?
  • g
    you can use any JavaScript expression
  • e
    Copy code
    ctrlKey
VM85:1 Uncaught ReferenceError: ctrlKey is not defined
    at <anonymous>:1:1
(anonymous) @ VM85:1
  • g
    Copy code
    html
<button hx-trigger="click[Math.random() < .95]">
  • e
    Yep I got that part but I'm wondering where 
    ctrlKey
    comes from
  • g
  • g
    you can access the properties of the event as variables
  • g
    it's technically written in the docs but someone was having one of those moments where they forgot not all developers know what name resolution is
  • m
    name resolution is just a monoid in the category of endofunctors, what's the problem?
  • e
    No problem on my end here's a rough pass of what I was trying to do, create a typescript type for "triggers" https://gist.github.com/reggi/79407c5000963decc6b9e934ee3e2e3d
  • e
    theres a bunch of issues for sure but some building blocks for ideally generating the string with some type completion from an object
  • a
    I just created an account on Mastodon, and hey, found out htmx "exists" there:
  • q
    Hey folks - I'm getting this error 
    SyntaxError: The string did not match the expected pattern.
    from this definition 
    hx-target="#1_1_18"
    using an 
    hx-confirm
    .
  • q
    It works as a target for other uses, like swapping out 
    innerHTML
    from an 
    hx-post
    - but wont work with the 
    hx-confirm
    . Anyone know why? Or how I can fix it/work arond it, without changing all of my ID generation logic?
  • m
    can you give us the whole stack trace?
  • m
    is this in safari?
  • q
    This is all I get, is that enough? Yes, safari 16.1 on macOS (Ventura), but happens in the previous Safari as well.
  • m
    can you set a breakpoint there and see what the string is?
  • m
    also, if you could post the HTML in question
  • m
    it seems like a bad selector is making it to safari somehow
  • m
    also, can you try in another browser and see if it's the same issue?
  • q
    html is
    Copy code
    <button hx-get="/clear_slot?slot=18" hx-confirm="Are you sure you want to clear this slot?" hx-swap="innerHTML" hx-target="#1_1_18" id="del_1_1_18" class="btn btn-sm btn-outline-danger delete" style="visibility: visible;">X</button>
  • q
    Hmm, not sure how to set a breakpoint - let me start with trying in Chrome.
1...893894895...1146Latest