Why this button disappears?

[rcorsari]

<div id="timeCont" hx-post="./update.php">

        <button type="button" hx-target="#timeCont" hx-swap="afterend">Update time</button>

</div>

this is taken from examples and modified for testing purposes, update.php returns the date time string

the behavior is that the button is substituted by the date time string while , targeting the #timeCont DIV and using hx-swap 'afterend' I have understood that the date time string should be appended after the DIV

Am I wrong? I have tried both 'afterend' and 'beforeend', but for either the two , the button disappears. In other words inside the DIV it remains only the date time string.
Please also note , for either the two, the date time string is INSIDE the DIV

Interesting behavior, clicking the date time string, so the innerHTML , the date time updates :-)

Thank you for hinting

[wirecodex]

hx-post parameter should be an url not a path: "/update.php" without the dot

[rcorsari]

I have added the dot but the behavior doesn't change

[Telroshan]

• You define hx-post on the timeCont div. As the doc says:

  hx-post is not inherited

  Even though it's not inherited, when you click on the button, the click event itself bubbles

• Since you haven't defined a hx-trigger attribute on timeCont, the default behaviour of htmx is to trigger on click. So, your click triggers the hx post of timeCont. What is important here is that hx-post is triggered from timeCont itself, not the child button

• Since you haven't defined a hx-target on timeCont, the default behaviour of htmx is to target the element itself (that is, timeCont, which in your case turns out to be what you want). Note here that the hx-target you defined on your button is simply ignored, since it is defined on a child element (attributes are inherited down, never up)

• Since you haven't defined a hx-swap attribute on timeCont itself, the default behaviour of htmx is to consider it as a innerHTML swap. Same logic applies here, the hx-swap you defined on the child is ignored.

To fix your problem, you'll want to write

<div id="timeCont" hx-post="./update.php" hx-target="this" hx-swap="afterend">
        <button type="button">Update time</button>
</div>

Or, if you want to keep the attributes on the button:

<div id="timeCont" >
        <button type="button" hx-post="./update.php" hx-target="#timeCont" hx-swap="afterend">Update time</button>
</div>