htmx-spring-boot icon indicating copy to clipboard operation
htmx-spring-boot copied to clipboard

hx:target throws an error when a raw CSS selector for ID is used: hx:target="#myId"

Open checketts opened this issue 2 years ago • 2 comments

Since the # sign is used when looking up message properties, Thymeleaf throws an error when a CSS selector is used directly.

This works: hx:target="${'#myDiv'} This also works: hx-target="#myDiv" (Since it isn't a thymeleaf processor) This fails: hx:target="#myDiv"

However the doProcess method that is failing in a protected final method of the parent class, so we can't override it to handle this single case.

I think if I use a delegate object, we can handle the edge case for hx:target processor only. I'll look through the other processors to see if the ID use case is common enough to warrant this special case.

I do think it that we need to address it more than just documenting that it isn't supported since the purpose of the hx:target is to reference an id.

checketts avatar May 12 '22 03:05 checketts

I would think that you would use the "normal" hx-target="#myDiv" if you want that.

If you want to use hx:target, it would be because you have some conditional probably, so you would do hx:target="${cond}?'#myDiv':'#otherDiv'}. I would just document this personally.

wimdeblauwe avatar May 12 '22 05:05 wimdeblauwe

Ok

checketts avatar May 12 '22 11:05 checketts