Use Fragment Identifier in hx-get etc. to Conveniently Specify hx-select
#3066
Replies: 1 comment 4 replies
-
|
Here is a contrived example which demonstrates the behavior, each button selects part of the page using the URL fragment identifier: <!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
<script>
htmx.defineExtension('get-select', {
onEvent: function(name, evt) {
if (name === 'htmx:beforeProcessNode') {
var elt = evt.detail.elt;
var a = elt.attributes["hx-get"] || elt.attributes["hx-post"];
if (a) {
var h = new URL(a.value, window.location).hash;
if (h) {
elt.setAttribute("hx-select", h);
}
}
}
}
});
</script>
<style>
#red {
border: red solid 4px;
padding: 1ch;
}
#both {
border: black solid 4px;
padding: 1ch;
}
</style>
</head>
<body hx-ext="get-select">
<div id="red">
<button hx-get="#red" hx-trigger="click" hx-target="closest div">
Nest RED!
</button>
</div>
<div id="both">
<button hx-get="" hx-trigger="click" hx-target="closest div">
Nest both!
</button>
</div>
</body>
</html>Edit: demonstrate both positive and negative case. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, just to let you know that if you're interested in exploring this idea further, feel free to make a repository for your extension and submit a PR against our community extensions list to add it in! |
Beta Was this translation helpful? Give feedback.
-
|
One idea to improve this extension is to instead use htmx.defineExtension('hash-select', {
onEvent: function(name, evt) {
if (name === 'htmx:beforeSwap') {
var elt = evt.detail.elt;
var a = elt.attributes["hx-get"] || elt.attributes["hx-post"];
if (a) {
var h = new URL(a.value, window.location).hash;
if (h) {
evt.detail.selectOverride=h;
}
}
}
}
});where we use the beforeSwap event and set the selectOverride directly instead so that we don't have to update the element itself. The only issue I can see is that this will override any manual hx-select property applied which could cause confusion. It may be possible to use htmx function to get the hx-select value via the internalAPI so we could handle this edge case better. let intAPI
htmx.defineExtension('hash-select', {
init: function(apiRef) {
intAPI = apiRef
},
onEvent: function(name, evt) {
if (name === 'htmx:beforeSwap') {
var elt = evt.detail.elt;
var a = elt.attributes["hx-get"] || elt.attributes["hx-post"];
if (a) {
var h = new URL(a.value, window.location).hash;
if (h && !intAPI.getClosestAttributeValue(elt, 'hx-select')) {
evt.detail.selectOverride=h;
}
}
}
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
I think using Lines 4811 to 4817 in 69857df I think it would be simpler to state in the documentation for this extension that the given fragment identifier will apply to |
Beta Was this translation helpful? Give feedback.
-
|
@Telroshan I am not quite sure I understand what interface non-legacy extensions should be designed to use. The (legacy) extensions in https://github.com/bigskysoftware/htmx-extensions leverage undocumented and unversioned internal APIs (unless I have missed something here https://htmx.org/extensions/building/ ). It does not appear that |
Beta Was this translation helpful? Give feedback.
-
For example,
would be equivalent to
Would this conflict with any current behavior? The essay on Template Fragments references some Java code which appears to do exactly this:
Discussion #1055 mentions that Unpoly selects the
maintag by default, which seems to be a more limited version of this idea. I think the general behavior I described above would make it even easier to use HTMX with existing endpoints and in static sites which may have difficulty specifyingHX-Reselect.Beta Was this translation helpful? Give feedback.
All reactions