Use Fragment Identifier in hx-get etc. to Conveniently Specify hx-select
#3066
Replies: 1 comment 7 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/[email protected]" 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.
-
|
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.
-
|
@TheDocTrier I can indeed not find Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
@Telroshan thanks for the info! I published the extension at https://github.com/TheDocTrier/hash-select . Based on what you said, I ended up using the request config path to obtain the fragment identifier. This should be generic across every request attribute HTMX provides. @MichaelWest22 thanks for the improvements! |
Beta Was this translation helpful? Give feedback.
-
|
Nice, feel free to submit a PR against our community extensions list to add it in if you want btw! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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