https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • g
    there is an adjacent project for mobile apps, called Hyperview. also check out Dockyard's Phoenix LiveView Native UI for mobile. both are still experimental status i would say
  • m
    this sounds like client side stuff, for which we recommend (but do not require) hyperscript:
    Copy code
    applescript
<div>
  <button  _="on click remove my parent">Delete</button>
</div>
  • m
    are you looking for the 
    from:
    modifier for the 
    hx-trigger
    attribute? This lets you trigger based on other elements in the DOM
  • n
    Thanks for the answer, I don't think I meant that, I was referring to the 
    .htmx-request
    CSS class
  • n
    My idea is that I have a and somewhere else in the DOM a that is refreshed by that form, and I want to act on this table's style when the form is submitted
  • n
    (since it's being refreshed)
  • p
    Yeah, just wanted to check I wasn't missing something. I'll just implement some simple pre-remove class settling stuff myself, or possibly work out if I can hook into htmx's replace code in some way so it's all hitting the same codepaths.
  • m
    there is 
    hx-on
    now, but for click events it seems overkill to me
  • g
    Thanks! I ll check them out.
  • b
    What is the "best" way to determine if any fields on a form have changed from when the form was loaded without a network call? The idea being to enable the submit button only when fields have changed. My current approach is to add a 
    data-initialValue="..."
    attributed to any form fields, then on the form's 
    input
    event run some hyperscript that compares any field with a 
    data-initialValue
    attribute with that field's 
    value
    and enable the button if there's a difference.
  • m
    you could listen for an 
    input
    event and mark it dirty w/ a class or something
  • b
    True, but I'd have no way to know if they changed it back to the original value. This is what I came up with. https://gist.github.com/geoffeg/28126ccf63ff958544adf527a81a788b
  • m
    Copy code
    applescript
on input debounced at 200ms 
  add .btn-disabled to the #submitButton
  for field in me
    if the field's @data-initialValue is not equal to the field's value then
      remove .btn-disabled from the #submitButton then exit
  • m
    (not tested, going from memory)
  • b
    Oh, very nice, thanks!
  • m
    well, see if it works first!
  • m
    but it makes use of some hyperscript tricks
  • m

    https://cdn.discordapp.com/attachments/725789747212976259/1112503579597619260/image.png▾

  • m
    may also want to switch to all inputs in the form?
  • m
    Copy code
    applescript
on input debounced at 200ms 
  add .btn-disabled to the #submitButton
  for <input, select/> in me
    if the field's @data-initialValue is not equal to the field's value then
      remove .btn-disabled from the #submitButton then exit
  • b
    One of the first programming languages/environments I used was Hypercard.
  • m
    rather than just children?
  • m

    https://cdn.discordapp.com/attachments/725789747212976259/1112503927351545946/image.png▾

  • m
    actually, since we are relying on the attribute anyway, it should probably be written:
    Copy code
    applescript
on input debounced at 200ms 
  add .btn-disabled to the #submitButton
  for field in <[data-initalValue]/> in me
    if the field's @data-initialValue is not equal to the field's value then
      remove .btn-disabled from the #submitButton then exit
  • m
    ugh, had a bug
  • b
    Oh nice, I didn't know about the attribute selector. That's very nice.
  • m
    (dropped the loop identifier in my excitement)
  • m
    anything in a 
    < ... />
    can be a general CSS selector
  • m
    (mod a few lexing bugs in hyperscript)
  • b
    is not equal to the
    generates an error for me, but 
    is not the
    works. Updated the gist with what works. https://gist.github.com/geoffeg/28126ccf63ff958544adf527a81a788b
1...11421143114411451146Latest