Comments (3)
@Telroshan, thank you so much for the swift feedback, detailed info and all the help here. You are a 🦸 (hero 😊).
I'm aware of the fact that this is for all but hx-get
AJAX requests and happy to read that nested forms are not encouraged. I think my confusion comes from the docs that mention the closest
form which I interpreted as you can nest them.
I was trying the following and as it uses the extended selector, this indeed does not work:
hx-include="closest div.columns, #container2"
I shall rename the issue to reflect this feature request.
from htmx.
Relates to #1754
from htmx.
htmx by default submits everything in the closest form element. This confused me as the html spec says that forms may not be nested.
Please note this is the case for non-GET requests but most importantly for "isolated inputs", as a form's closest
form is that very form itself. As per the closest
' doc:
Returns the closest ancestor Element or itself, which matches the selectors.
Lines 3416 to 3419 in f9b3f88
The idea here is that if you make a non-GET hx-
request on an input that is inside a form, it's very likely that you'll want the full context along, i.e. the parent form's data. If the request comes from a form already, this won't do anything as the closest form is that same form.
You should indeed not use nested form elements and we don't encourage this at all.
As for hx-include
, you should already be able to use multiple selectors.
As per the doc:
A CSS query selector of the elements to include.
A standard CSS selector resolves to document.querySelectorAll and will include multiple elements, while the extended selectors such as find or next only return a single element at most to include
Which means any standard CSS selector matching multiple elements, will return those multiple elements. The exception here are the extended selectors that htmx provides (closest
, find
, next
, previous
) which for now are limited to a single selector. But using IDs you may totally reach your goal using hx-include="#container1 .something, #container2"
for example.
The reason that hx-trigger
has this "multiple triggers" section is the doc is because it supports a mini-language syntax with the from
modifier for example, among other modifiers.
Hope this helps!
from htmx.
Related Issues (20)
- htmx 2.0.0 breaks <template> elements inside Web Components HOT 5
- htmx should preserve form element order when encoding form data for submitting via GET or POST
- HX-Location feature: push url options (example of working code, tiny change) HOT 3
- poll trigger for table content - how to keep/disable scroll on update HOT 1
- v2.0.0 hx-swap="delete" + hx-retarget="body" triggers uncaught exception HOT 1
- Extension Performance Improvments
- hx-swap="delete" should be allowed to work even with no request at all HOT 1
- Fetch hx-vals programatically HOT 2
- sha384sum is giving me the wrong answer for 2.0.1/dist/htmx.min.js HOT 1
- Does new extension released with core? HOT 2
- feature request: out-of-order rendering support
- `htmx:beforeRequest` and `htmx:beforeSend` event does not send on load trigger HOT 1
- `'htmx.d.ts' is not a module` HOT 5
- hx-trigger from:html with data-bs-theme HOT 1
- hx-swap-oob not working as expected HOT 2
- triggerEvent relies on a non-null target existing; therefore beforeSwap won't fire if target is null (possible when hx-retarget is used)
- Add the `pushUrl` option for `htmx.ajax()` calls
- UX is broken for streaming HTML HOT 2
- I am using the hx-boost feature and I am experiencing strange problems. Javascripts such as dropdown and modal do not work
- Trigger modifier "from" prevents default behaviour of some input fields HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from htmx.