-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
htmx.ajax swaps body's innerHTML when the target id doesn't exist #2869
Comments
This is happening because the htmx.ajax() ajax helper function is calling the the issueAjaxRequest function with the default body as the element and passing in a targetOverride set to the resolved target you passed in. If the targetOveride passed in is null because the resolved target is not found then it falls back to checking the body element for its target. And if you happen to have boosted=true on the body then it makes the body target the body causing your issue. I think this is an edge case bug and not the intended behaviour. to resolve it in your situation i would do: if(htmx.find(target)) {
htmx.ajax('GET', url, target)
} |
I didn't think of that. Thank you for that suggestion. |
Actually looking at it the boosted=true is not required as if target is invalid it falls back to checking body target and unless you set a hx-target on the body it will always return itself as the target boost or no boost. I don't know if this is really intended and may just be what it falls back to. Can fix the issue with dev...MichaelWest22:htmx:ajax-no-target which gets it to htmx:targetError on bad requests but this could be a breaking change if someone was depending on this broken fallback behaviour? |
It could but honestly it looks really convoluted to me, why would you want the server's reponse that you intended to swap at a very specific place (since you passed in a selector/target element), to instead replace the whole body's content? I like your suggested change @MichaelWest22 , feel free to open a bugfix PR.
|
Yeah i've simplified this a bit now but it has to be a little complex sorry to handle all the situations I was testing it with. targetOverride: resolveTarget(context.target) || ((!context.target && resolveTarget(context.source)) ? null : DUMMY_ELT) If resolveTarget(context.target) is not null|undefiend use this as the target
I've updated my logic to make it a little more obvious what it is checking and I think its working well. But please review my updated logic to double check. Added tests already for most of the situations you mention. |
rewrote the logic into an expanded if statement so its easier to understand and debug and added inline comment |
@ohmyohmyohmy fix now in v2.0.3 so please retest and close if it is now resolved |
I have an app where tabs hide certain div-ids when not loaded. When the div with the target id is visible, htmx.ajax() POST works as expected swapping the innerHTML as directed. But when the div with the id is no longer visible, the function replaces the entire innerHTML of the body with the response. Is this what's supposed to happen?
I'm using htmx 2.0.2
The text was updated successfully, but these errors were encountered: