https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m

    mysterious-toddler-20573

    05/28/2023, 10:13 PM

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

  • m

    mysterious-toddler-20573

    05/28/2023, 10:16 PM
    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

    mysterious-toddler-20573

    05/28/2023, 10:17 PM
    ugh, had a bug
  • b

    brash-house-85887

    05/28/2023, 10:17 PM
    Oh nice, I didn't know about the attribute selector. That's very nice.
  • m

    mysterious-toddler-20573

    05/28/2023, 10:17 PM
    (dropped the loop identifier in my excitement)
  • m

    mysterious-toddler-20573

    05/28/2023, 10:17 PM
    anything in a
    < ... />
    can be a general CSS selector
  • m

    mysterious-toddler-20573

    05/28/2023, 10:18 PM
    (mod a few lexing bugs in hyperscript)
  • b

    brash-house-85887

    05/28/2023, 10:20 PM
    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
  • m

    mysterious-toddler-20573

    05/28/2023, 10:28 PM
    playing around w/ things, gimme a sec
  • m

    mysterious-toddler-20573

    05/28/2023, 10:34 PM
    https://codepen.io/1cg/pen/WNaWBwK?editors=1111
  • m

    mysterious-toddler-20573

    05/28/2023, 10:34 PM
    OK, this seems to do what you want
  • b

    brash-house-85887

    05/28/2023, 10:36 PM
    Thanks! Also, TIL demo.htmx.org will include hyperscript, that's really nice.
  • m

    mysterious-toddler-20573

    05/28/2023, 10:40 PM
    yep, latest htmx, latest hyperscript + a way to mock ajax requests
  • b

    brash-house-85887

    05/28/2023, 10:49 PM
    Truly serverless, expect for the server serving the serverless.
  • g

    great-cartoon-12331

    05/28/2023, 11:08 PM
    'serve the serverless' -Book of Hypermedia
  • f

    freezing-waitress-26396

    05/28/2023, 11:13 PM
    Not sure if it's correct but I check for form validity using a hyperscript behavior then install it on the form
    Copy code
    behavior validateForm
        on click or change or input
            set validated to my.checkValidity()
            if validated tell the first <button[type='submit']/> in me remove [@disabled] end
            else tell the first <button[type='submit']/> in me add [@disabled] end
        end
    end
  • f

    freezing-waitress-26396

    05/28/2023, 11:14 PM
    You can combine this with your data-initialValue stuff
  • b

    brash-house-85887

    05/28/2023, 11:16 PM
    Very nice, thanks!
  • f

    freezing-waitress-26396

    05/28/2023, 11:22 PM
    @mysterious-toddler-20573 could you technically then use Hyperform's
    setCustomValidity()
    with this
    data-initialValue
    logic? See
  • f

    freezing-waitress-26396

    05/28/2023, 11:23 PM
    i.e. if the value and initialValue aren't equal, invalidate the form using the validation API
  • f

    freezing-waitress-26396

    05/28/2023, 11:23 PM
    and have the
    validateForm
    stay as basic as it is above? 🤔
  • m

    mysterious-toddler-20573

    05/28/2023, 11:28 PM
    yeah, was thinking a custom validation might be nice here and generalize well
  • h

    high-iron-12893

    05/28/2023, 11:40 PM
    Hi all! I have a button that pops up a modal form. The form's appearance changes (via htmx swaps 😈) depending on what's done with it. I would like for the form's appearance to reset if the modal is closed and then reopened. What's the recommended way for handling this situation? I was thinking of setting an
    hx-trigger
    on the
    hidden.bs.modal
    event bootstrap fires when a modal is done hiding but not sure if there's a more idiomatic way to do it.
  • g

    gray-morning-3453

    05/29/2023, 12:14 AM
    Copy code
    function hasFormChanged(form) {
                    // Get all controls 
                    const controls = form.querySelectorAll("input, textarea, select");
    
                    // Initialize flag
                    let changed = false;
    
                    // Loop through
                    controls.forEach(control => {
                        // Ignore controls that are disabled or readonly
                        if (control.disabled || control.readOnly) {
                        return;
                        }
    
                        if (control.type === "checkbox" || control.type === "radio") {
                        // For checkboxes and radio buttons, compare checked state to defaultChecked state
                        if (control.checked !== control.defaultChecked) {
                            changed = true;
                        }
                        } else if (control.tagName === "SELECT") {
                        // For select elements, compare selected options to defaultSelected options
                        const selectedOptions = Array.from(control.options).filter(option => option.selected);
                        const defaultSelectedOptions = Array.from(control.options).filter(option => option.defaultSelected);
    
                        if (selectedOptions.length !== defaultSelectedOptions.length) {
                            changed = true;
                        } else {
                            for (let i = 0; i < selectedOptions.length; i++) {
                            if (selectedOptions[i] !== defaultSelectedOptions[i]) {
                                changed = true;
                                break;
                            }
                            }
                        }
                        } else {
                        // For all other form controls, compare current value to defaultValue
                        if (control.value !== control.defaultValue) {
                            changed = true;
                        }
                        }
                    });
    
                    return changed;
                }
  • g

    gray-morning-3453

    05/29/2023, 12:15 AM
    Courtesy ChatGPT
  • g

    gray-morning-3453

    05/29/2023, 12:16 AM
    I have been using it, and haven't found any bugs yet. But my forms are smaller.
  • s

    swift-spring-80795

    05/29/2023, 2:22 AM
    Any one compared HTMX with Flutter/Dart? I know, vastly different tech..., but the goal is the same - fast and productive development. My concern - htmx has limit on how interactive your app can be, flutter has no such limit, but some up-front learning investment.
  • g

    great-cartoon-12331

    05/29/2023, 2:23 AM
    they have fundamentally different assumptions and fit in different niches. they're not really comparable
  • s

    swift-spring-80795

    05/29/2023, 2:36 AM
    @great-cartoon-12331 with Flutter you can build ANY web app, including the type of web apps HTMX is meant for. The opposite is not true! (I don't even consider mobile, just web) Flutter also comes with the "batteries included" - UI kit, tool, debugging. With HTMX, you have to make further choices...
  • g

    great-cartoon-12331

    05/29/2023, 2:37 AM
    yeah, but the tradeoff is you have to invest in a new toolchain/ecosystem built and maintained by Google, and you are building a full-fledged app. with htmx you are building on a thin layer on top of Web standards and not locked into any corporation's ecosystem. like everything in engineering, it's about tradeoffs