Can you provide more details as to the differences in your local dev environment and your production environment? 404 would seem to indicate that something that exists in dev doesn't exist in production - and, as you said "form", that would likely be a resource that isn't dependent on htmx. I'm happy to help you debug it, though - I just need more information. 🙂

if you want a professional course

Hello ! I'm looking for a htmx cheatsheet. Would you know where to find one?

I’m starting to replace “serverless” with “managed services” in my head. But one of the biggest differences is that it “scales to zero”. I.e. if no one is using it then your not paying for it. Ideally it’ll also scale up to whatever you need as well without you needing to do anything.

Probably the examples as your best bet: https://htmx.org/examples/

But if people really knew what it meant then how would the consultants make money?

those guys always find a way to get the money

Is there a way to get trigger polling to only function when the browser window is actually active?

you can add a filter to polling

and test if the window is active

yes there is check discussion board on github for an example

Hi everybody. I started using the shoelace web component library. It works quite great, however it seems that HTMX misses when I click on navigation elements, like a button, created with the library. @User suggested using hx-include. But it didn’t work for me. If anyone has another suggestion I’d really appreciate it. Thanks!

Could you paste a little code snippet of what you’re trying to do with the button?

Sure, thanks so much for looking into this. The button is part of a site's navigation. So, after clicking it should open (with HTMX) a new page. Like this:

<sl-icon-button 
            id = "search_btn"
            library = "ma_icons" 
            name = "ma_search" 
            href = "/search" 
            label = "search">
</sl-icon-button>

Normal links work as expected with HTMX. But this icon button, for instance, is ignored. And just in case, these are the attributes on the body (very standard htmx, nothing fancy):

<body 
 hx-boost="true"
        hx-push-url = "true"   
        hx-select = ".site-main" 
        hx-target = ".site-main"
        hx-swap = "outerHTML swap:250ms settle:100ms show:unset"  
        hx-indicator ="#loader" 
        ....
>

Hello guys, I'm sure it is a simple question Trying to use HTMx for the very first time HTML code:

<button name="bt1" hx-trigger="click" hx-post="/clicked" hx-swap="none" value="TESTVALUE"}>
    Click Me
</button>

Python code:

@app.route("/clicked", methods=["GET","POST"])
def clicked():
    print(f"{request.method=}")
    print(f"{request.args=}")
    print(f"{request.args.get('bt1')=}")
    print(f"I WAS CLICKED")
    return ''

The bt1 value is always None instead of TESTVALUE

any idea ?

Try hx-include?

I have not, going to give it shot now

same

no result return

I was able to make it work with this, but it looks over complex:

<form method="POST">
    <input type="hidden" name="setid" value="{{ setinfo['ITEMID'] }}">
    <button  hx-trigger="click" hx-post="/clicked" hx-swap="none"}>
        Add in my Inventory
    </button>
</form>

and for the Python side:

@app.route("/clicked", methods=["GET","POST"])
def clicked():
    setid = request.form.get('setid')
    print(f"{request.form.get('setid')=}")

How long does

npm run test

take for people? It seems to be hanging indefinitely on my machine

Try running

htmx.process()

in the browser dev console after the page loads to see if that allows the button to work. It's possible htmx is processing the nodes before shoelace so it doesn't see the attributes. If this fixes it, then you should find out if shoelace triggers an event after processing all elements on the page so you can run the htmx process command after.

Thanks so much... this makes sense. I added this class

.htmx_trigger

to the shoelace component and tried these different options:

htmx.process('.htmx_trigger') 
htmx.process(document.querySelector('.htmx_trigger'))

In both cases, the return was

undefined

and the behavior did not change. Just in case,

document.querySelector('.htmx_trigger')

does return the shoelace component. In the meantime, I'm going to ask the folks at shoelace to see what insights they have.

Hi everyone 👋 I recently discovered htmx and think it’s awesome. I’ve started using it to build some internal tooling at work. Just wanted to thanks to creator and contributors.

Hi there! We are all glad you are finding htmx useful and please let us know if you have any questions

I got something to work, I had to add a couple of htmx attributes to the component and add a script to prevent the component's default behavior. Something like this:

<sl-icon-button 
            class = "htmx_trigger"
            library = "ma_icons" 
            name = "ma_search" 
            hx-trigger="click"
            hx-get= "/search"
            href = "/search" 
            label = "search"></sl-icon-button>
<script>
    const btns = document.querySelectorAll('.htmx_trigger');
    for (let i = 0; i < btns.length; i++) {
       btns[i].addEventListener('click', e => {
          e.preventDefault(); 
       }) 
    }  
</script>

I'll keep digging to see if there's an even simpler solution. I wish I didn't have to add the preventDefault script part.

How is shoelaces made? Stencil based?