-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Specify multiple targets to swap #44
Comments
that seems reasonable to me would it make more sense on the select attribute? |
@chg20 Yeah I think so... I'm just trying to imagine how it would work, without being a breaking change. As it stands now, whatever element(s) from the response match the value of But the way I imagine it (which is based on Unpoly's behaviour), is that So would this be about changing the "mode"? Or should it instead introduce a new OR - is there a reason why ? |
I can see the argument that Would that change address your needs? |
@chg20 I think so! :) |
I'm not sure if this makes sense, but to me it seems possible to solve it by accepting a javascript target like so: Then I could just write a javascript function to update the parts making sense in the page - while still enjoying the nice htmx syntax for the input. |
The whole point of htmx is so we can write less javascript. |
As far as I can tell, we haven't reached a working mechanism for specify multiple targets to swap. So I came up with a suggestion that might work in the special cases where the standard functionality doesn't cut it. Given this, did you have anything constructive to add or were you satisfied with taking a dump on my suggestion? |
Current mechanism specifies target in the source element, would it be possible to target some kind of wrapper element and inside that element specify multiple receivers? Main document
Received document
|
@sandebert that's a reasonable feature request, I am considering it. |
i'm considering to use here's an example i came up with that only includes relevant bits and a proposal for a syntax extension of the <head>
<!-- there's also this problem, that is probably unsolvable with this technology-->
<title>Adams, D.: A hitchiker's … (page 42)</title>
</head>
<body>
<div id="title">
<h1>Adams, Douglas: …</h1>
<h2 id="chapter-title">Chapter 4</h2>
</div>
<div id="controls">
<div id="page-selection" hx-boost="true" hx-swap="fragments(#chapter-title, #pages-selection, #facsimile, #transcription) swap:500ms">
<a href="/page/41">Previous page</a>
<div>
<a href="/page/0">Cover</a>
<a href="/page/1">Chapter 1, Page 1</a>
<a href="/page/1">Chapter 1, Page 2</a>
…
</div>
<a href="/page/43">Next page</a>
</div>
</div>
<div id="facsimile">
<img src="…">
</div>
<section id="transcription">…</<section>
</body> since i'm putting some effort into the whole project anyway, i could also try to implement an agreed design. |
Would out of band swaps work for you? |
no, my example is maybe too sparse, as it doesn't show elements between and around those in question. so, my requirement would also be to swap multiple scattered elements by one hyperlink invocation. |
in hope to stimulate a discussion on the design, i throw in further ideas and half-baked thoughts: <div hx-boost="true" hx-targets="#title, #contents">
<a href="/foo.html">Follow me</a>
</div> but <div hx-boost="true" hx-fragments="#title, #contents">
<a href="/foo.html">Follow me</a>
</div> as the main aim wouldn't be to speed up responses in my case, the |
I would recommend exploring these ideas with an extension: In particular, the |
if you meant that implementing an extension is a good idea and might happen from my side, but not too soon. i appreciate any feedback and proposals on syntax and behaviour. |
Jus to thrown in another use case that I am working on, namely pressing "add to cart" would change the button to a disabled "added to cart", and update the number of cart items. Right now I am implementing number of cart items to be a Edit: I am testing if Edit: The above does not work after I add Edit: #339 works. |
Any progress on this..? |
OK, resurrecting this issue: I like the idea in general, but I think this should be implemented as an extension first by someone who needs the functionality, then we can consider moving it into the core. The morphdom swap extension is a good place to start: |
Not sure if it helps, but I do multiple fragment updates via websockets and OOB swaps. It does require an extra websocket connection though ... |
And about a scenario where we have several elements with the same If we use What if a |
Would a viable solution be something like the following? <div hx-target="{
'.container':'.responseContainer',
'#otherDiv':'#responseId'
}"> Basically having an object with targets mapped to selects (combination of what is now hx-select and hx-target). |
Any update on this. Basically I am trying to achieve the following
|
You probably want the multiswap extension (https://htmx.org/extensions/multi-swap/) or, my favorite, idiomorph. |
Is there any objection to support this? or we should go for the extensions way? |
what about |
i am considering merging the extension behavior into htmx proper as it obviously is a need people have |
for now, please use the extension |
If you merge this sometimes, could you remove the "multi:" prefix - as it makes not really sense. If there is a comma, it is a list. |
@1cg My use case is a multi-swap but I have 2 additional complexities.
eg (this is my pseudo-syntax, not real htmx syntax)
Suggestions? Thx! |
oldest but very important issue :) my case is that I want to be able to use different parts of response on multiple targets using client-side-templates extension and my suggestion.. supporting multiple targets (think this is the most clear notation and shouldnt be a breaking change I think?), multiple overridable templates specified either as now or on the target element (shoudnt either be a breaking change): <button
hx-ext="client-side-templates"
hx-get="/user/details"
hx-target="#id1,#id2"
mustache-template="a"
>Details</button>
<div id="id1"></div>
<div id="id2" mustache-template="b"></div>
<template id="a">{{name}}</template>
<template id="b">{{age}}</template> |
This is a related note to this: #26
And I appreciate possibly a hard ask, but...
I understand how the
oob
feature lets me return multiple containers that can get injected into the page, but this requires architecting my app such that it only returns fragments in response to an htmx request. However I would prefer to always send a single, full-page HTML response, and leave it to the front-end to pick and choose what to inject or discard.For example if I'm building a store, and I want a user to be able to add an item to their cart, there are at least 2 DIVs in the response that I'd like to select & inject; a flash/notice confirming the add, and an update to the cart icon along my navigation bar.
I'm curious to hear your thoughts on this scenario. Thanks!
The text was updated successfully, but these errors were encountered: