If I hit enter:

which then hits https://github.com/bigskysoftware/htmx/blob/v1.8.4/src/htmx.js#L3111 and barfs because it's an email

I regret to report this is reproducible 😦 https://jsfiddle.net/udcq74nm/1/

are you opposed to a hotfix for now that just try/catches the set selection call

reading a couple of SO questions + the w3 bug thread and I'm not sure if there's any alternatives

and it's real annoying that the property has the method but just throws an error if you call it so I'm not sure how to test it's one of the good ones w/o enumerating the types we want to set selection on

wat

\> has the method \> throws 🤡 🚙

yes

🤡

gonna write a test + the try catch for now to at least get a hotfix in

I can't get the test to submit the form:

js
    it("can trigger swaps from fields that don't support setSelectionRange", function(){
        const template = '<form hx-get="/test">\n' +
            '<input value="test@test.com" type="email" id="id_email" />\n' +
            '<input type="submit" id="id_button" />\n' +
              '</form>';

        const response = '<form hx-get="/test">\n' +
              '<input value="supertest@test.com" type="email" id="id_email" />\n' +
              '<input type="submit" id="id_button" />\n' +
              '</form>';
        this.server.respondWith("GET", "/test", response);
        make(template);
        var input = byId("id_email");
        input.dispatchEvent(new KeyboardEvent('keypress', {"key": "Enter"}));
        this.server.respond();
        input.value.should.equal("supertest@test.com");
    })

I can t get the test to submit the form

A little late to the party but, yes, I have. Feel free to ping me if you have specific questions! 🙂

Man - now I have not 1, but 2 books to read, distracting me from the "October 2022" changes I've just now gotten around to making in another app... I love this community! LOL (I really do... always looking for ways to get better at my craft)

2 questions really:, 1. How do u pick a theme that will work with htmx ? Let me ask this way - are there any kind of JavaScript used in templatws that will break htmx and should be careful. 2. When u start converting/cutting a theme to htmx...what are the gotchas to take care of ? I read on reddit that we should move all dropdowns to alpinejs/Hyperscript to make it work with htmx. Anything else to be done for chart.js, etc ?

Hello guys, novice programmer here, nice to meet you all

can someone tell me why this example is not working for me? https://jsfiddle.net/1y4k6pae/ https://htmx.org/examples/animations/ its on this page on the very bottom

Hi All. I am trying to read/learn HTMX. I have a simple button shown below:

<button id="delete-button" hx-post="/delete" hx-confirm="Are you sure you want to delete?">Delete Me!</button>

When I load the web app and check console, it shows that

htmx.min.js

was loaded successfully but for some reason when I click the button nothing happens. No browser confirm alert or post request. I use Firefox Developer Edition for my preferred browser.

Up front: I realize I missed the Java+Thymeleaf part - I haven't done that - but your questions don't necessarily implicate the back-end technology. For 1, the theme shouldn't interfere. I load the full Bootstrap 5 JS in multiple applications, and it plays nicely with htmx. For 2, it all depends on how you are structuring your back-end. htmx is designed to make requests that return HTML, then plug that content into the page at the specified place. If you are looking for a

<select>

that does a GET based on what the user selects, you can use

hx-get

and

hx-target

to put that content somewhere else. It's a different way of thinking about API endpoints. Conversely, when JavaScript adds elements to a page, htmx doesn't know anything about those elements. This is probably the biggest "gotcha" - htmx can't act on elements it doesn't know about. However, running

htmx.process()

on those elements make it aware of them https://htmx.org/api/#process . Anyway, hope that helps. Deciding how to break up the requests and the HTML partials is probably the biggest decision point, and sometimes the whole "make it as narrow and targeted as possible" mindset that works well in some architectures could very well add complexity you don't need. p.s. I've looked into both _hyperscript and Alpine.js, but in my use cases, I've been fine with plain ol' JS, but other folks may be better advocates for them. 🙂

That was incredibly useful. Two last questions 😃: 1. Which HTML5 theme did u end up using may I ask ? Just wanted to see which ones have already been successful 2. I know u use plain js...but u have seen alpine/hs and have used html themes in the way I aspire to. Which one is closer to how you would have written js ?

you need to include the class-tools extension: https://htmx.org/extensions/class-tools/

unfortunately, due to the way the demo script works, extensions don't play well w/ demos

you can include htmx directly at the start to fix that

Would that probably fix my issue since I don't include the extension?

Because I can't get anything to trigger at all.

sorry im completly new to webdev, dont have any experience with it. how do I include the htmx? isnt the scriptblock at the beginning and the div around the actual example sufficient?