Skip to content
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

Hx-Retarget and this #1962

Open
ThePrimeagen opened this issue Nov 5, 2023 · 6 comments
Open

Hx-Retarget and this #1962

ThePrimeagen opened this issue Nov 5, 2023 · 6 comments
Labels
enhancement New feature or request

Comments

@ThePrimeagen
Copy link

Hx-Retarget and this as target causes null error and prevents htmx from operating any more on the site

the docs claim that this

This example uses hx-target="this" to make a link that updates itself when clicked:


context

doing a little 422 swap and from the server i was going to target the originating form to show the error

form

<form hx-post="/thing" hx-swap="beforeend" hx-target="#things">
    ...

server

name := c.FormValue("name")
email := c.FormValue("email")

if contactExists(data.Contacts, email) {
    c.Response().Header().Set("HX-Retarget", "this")
    c.Response().Header().Set("HX-Reswap", "outerHTML")
    return c.Render(422, "test", data)
}

this will result in the target code executing, notice no special handling for this

if (hasHeader(xhr,/HX-Retarget:/i)) {
  responseInfo.target = getDocument().querySelector(xhr.getResponseHeader("HX-Retarget"));
}
@ThePrimeagen
Copy link
Author

i cannot use the Request header's Hx-Target since that is the target in the form not the form itself

@ThePrimeagen
Copy link
Author

also glad to submit a pr to fix this

@Telroshan
Copy link
Collaborator

Indeed, the HX-Retarget header works differently than hx-target, as its doc says:

HX-Retarget
a CSS selector that updates the target of the content update to a different element on the page

I don't know if this was forgotten at the time extended selectors were added in, I don't see any reason to oppose to add support for those extended selectors for this header, relatively to the element that triggered the request

Feel free to submit a PR for it!

@ThePrimeagen
Copy link
Author

i'll try to get something up in a bit

@alexpetros
Copy link
Collaborator

alexpetros commented Nov 5, 2023

This is another consequence of the extended CSS selectors being a construct that exists in a lot of places, so it looks like "one thing", but isn't necessarily supported everywhere that CSS selectors are.

You probably don't have to do too much more than change the line you identified to use findAttributeTarget (although the "this" behavior is a little weird).

Also another reason to unify their documentation: #1601

@ThePrimeagen
Copy link
Author

@alexpetros thanks for the direction! this is great. i will still take care of this, just preparing for my talk still :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants