htmx
htmx copied to clipboard
bigskysoftware
hx-vals is "global" and cannot be "disinherited"
When you have defined hx-vals there is no way to avoid submitting ALL values inherited from parent nodes (actually the whole page). I think hx-disinherit should work in the following case, but it's not. Both size and color are submitted. I tried both hx-disinherit="hx-vals" and hx-disinherit="*" but this dis-inheritance is not working. If you also try hx-vals="unset" on a child all values are deleted, even from the parent nodes. It seems htmx uses a "global" vals variable to set / unset / change values, but I think this is a strange behavior and excludes many use cases with a page with many requests and different values per request.
<form hx-get="/submit-size-and-color" hx-vals='{"size": "large", "color": "blue"}' hx-disinherit="hx-vals">
<button hx-get="/submit-size-only" hx-vals='{"size": "small"}'>Button</button>
<input type="text" name="color" value="red">
</form>
In my particular case, i had a piece of child template loaded from a div on "load" as shown below. My case might not be fit for yours, but it might give a clue for appropriate solution:
<!-- loader parent -->
<div id="questionview"
hx-trigger="load"
hx-target="this"
hx-swap="innerHTML"
hx-post="/game/question/random"
hx-vals='{{ hxVals | tojson }}'></div>
<!-- child template -->
...
<div class="choice"
hx-post="/game/answer/save"
hx-vals='{{ vals | tojson }}'
hx-trigger="click once"
hx-target="#choices"
hx-swap="outerHTML">{{ choice.body }}</div>
and this results in something like:
<div id="questionview ... >
...
<div class="choice" ... />
</div>
The result would then inherit the whole hxVals from the questionview alongside the vals. I solved the issue by simply moving the caller into a child div of questionview, completely overwriting it on load by setting hx-swap="outerHTML" as shown below. I still got the same result but got rid of hx-vals inherited from parent questionview.
<!-- loader parent -->
<div id="questionview">
<div hx-trigger="load"
hx-target="this"
hx-swap="outerHTML"
hx-post="/game/question/random"
hx-vals='{{ hxVals | tojson }}'></div>
</div>
This is a problem for us too. We have a dropzone (parent) and within it a button that toggles and populates a sidebar with candidates (child).
It breaks the child interaction. On the parent dropzone we need to access a nested event attribute that is not present in the event during the child interaction. The child interaction should not even try to access it but we can't disable that.
having the same issue here. Caught me by surprise, I thought hx-disinherit weren't working.
I found a workaround using hx-params="not ".
That really helps. Thanks. Also it's possible to use comma separated list for all inherited values like hx-param="not <param1>,<param2>"
