htmx icon indicating copy to clipboard operation
htmx copied to clipboard

hx-target doesn't seem to accept a string ID if it contains a period

Open wh33t opened this issue 1 year ago • 1 comments
trafficstars

If I'm reading this correctly (and it is the thing to read?): https://www.w3.org/TR/html4/types.html#h-6.2

6.2 SGML basic types

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

I can't seem to get HTMX to target an ID if it has a period in it's name.

Is this a bug?

wh33t avatar Jan 27 '24 20:01 wh33t

I'm new to htmx, but encountered something like this in another context, which led me to this StackOverflow answer. Since the value of hx-target can be a CSS selector, maybe the period needs to be escaped?

Update: Confirmed this. Escape the period with a backslash in the htmx attribute (such as hx-target). For example, this works for me:

    <button hx-get="/hello" hx-target="#hello\.world">Test</button>
    <div id="hello.world">...</div>

Without the escaping backslash, htmx doesn't even make the get request (presumably since it can't find the target element, it doesn't bother to get the response that it will have nothing to do with).

genericmoniker avatar Feb 03 '24 04:02 genericmoniker