In other words, it might not be that there is a doctype tag, but that your response is three things.

I am super new to HTMX so I'm just brainstorming with you; take anything I'm saying with a grain of salt.

I added a js event to clean the innerHTML of the "div response" when we click on the submit button - https://github.com/halkyonio/primaza-poc/blob/df430abe1b9df72a92d5e28d2f1703e538a1cc87/servicebox-app/src/main/resources/META-INF/resources/js/primaza.js#L2-L4

Yes you need to wrap your oob in a useless element that's only a container that will be discarded. That's where the swap-oob attr needs to be

Is it possible to access the content added by HTMX using "innerHTML" from some js functions as I would like to disable a submit button ?

<form class="form-horizontal" action="/claim" hx-post="/claim" hx-target="#response" method="POST" hx-swap="innerHTML">
--> content returned to HTMX: <div class=\"alert alert-success\">Claim created successfully for id: " + claim.id + "</div>"
--> content displayed within the <div id=response>
--> Button is not disabled using such JS function!!
(() => {
    // EventListener watching submit button event
    // If the class of element includes "alert-success", then disable the button
    // Clean the inner HTML of the <div id="response"> to remove previously displayed messages
    document.addEventListener("submit", () => {
        const msg = document.querySelectorAll("alert-success").forEach((item) => {
            document.getElementById("claim-button").setAttribute("disabled",true);
        });
        document.getElementById("response").innerHTML = "";
    });
})();

I found a solution using

htmx.on

function 🙂

// Event watching when HTMX is swapping the HTML content
    // If the div tag includes as class "alert-success",, then the button is disabled
    htmx.on("htmx:afterSwap",function(evt) {
        const msg = evt.detail.elt.outerHTML;
        if (msg.includes("alert-success")) {
            document.getElementById("claim-button").setAttribute("disabled", true);
        };
    });

I'm in the same boat as you and I did in fact try to wrap the it in a

div

, but somehow it ended up cutting more (The

td

elements. In the end I went with an event to get the row updated which I think is more elegant, but I was wondering if this was a bug.

That's the first thought I had. but when I tried that, it ended up cutting even more than I expected, to the

td

level, which made me wonder if this was some kind of bug. No big deal for me, I went with a different approach, but was wondering if it was worth reporting.

are you trying to add a new row to the table?

table elements are notoriously difficult to deal with because they do not parse the normal way.

You can set

htmx.config.useTemplateFragments

to true to see if template-style parsing fixes the issue

can you explain bit more about what it means to use template fragments? The docs don't offer any details on that

That's right, as a result of a post from a form outside of the table. I ended up using an event based approach described in https://htmx.org/examples/update-other-content/ which refreshes the table. Not as efficient, but more elegant.

Yep, had initially forgotten that and added it after the fact, which did help in getting the table updated, but led to these weird side effects.

the fundamental problem is that table elements aren't allowed to appear in arbitrary places in HTML: if you but a inside a it is simply ignored by the HTML parser. If you use a tag around the whole thing, though, you can have just a top level . check out this code: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L263 see all that special handling for table-related stuff? The problem is that that all breaks if the content includes oob stuff as well. tables are a huge pita, unfortunately.

ahh okay that makes a lot of sense. Would be cool to put a small blurb about this in the docs 😄

you just 7b'd yourself

unfortunately im not allowed to make contributions to OSS projects ☹️

head-support

hmmm what is the origin of this expression?

I can try to write up something once I finish the million things I need to be doing. Unfortunately I moved away from that approach so it would take me a little time to get back to it. I would also test a few workarounds if I did that to see if it can be made to work.

rule 7b: if you suggest it, you implement it

isn't that gnomes policy?

htmx 2.0 pre-survey survey: https://htmx.limesurvey.net/225779?lang=en

eh why am I just finding out about html portal now

of all sad words

yea... I saw that too

indeed sad

Anyone have an issue when replacing a div's content the page is froze in place (can't scroll) ?