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.

Sign up for GitHub

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

Jump to bottom

parentElement of div not ready when htmx tries to swap it with another element using outerHTML #786

Open
BoPeng opened this issue Feb 2, 2022 · 2 comments
Open

parentElement of div not ready when htmx tries to swap it with another element using outerHTML #786

BoPeng opened this issue Feb 2, 2022 · 2 comments

Comments

@BoPeng
Copy link
Contributor

BoPeng commented Feb 2, 2022

I have an application with

<body>
<div id="nav-menu"></div>
<div id="page-content">
</div>
</body>

where the page-content is replaced with another page using hx-get when users navigate through pages through a menu.

I get errors from time to time, saying

image

Tracing into the code I find that, from time to time,

htmx/dist/htmx.js

Line 620 in f1cef92

insertNodesBefore(parentElt(target), target, fragment, settleInfo);

the <div>'s parentElement, which is the body element, is NULL, causing this error.

What appears to happen is that

  1. A new <div> is replacing #page-content using outerHTML method
  2. The new <div> is rendered, and the user clicks a link, which tries to replace <div> with another <div>.
  3. The old <div> is not yet "hooked" to <body>, causing the error.

One solution that I can think of is to do

<body>
<div id="outer-content">
<div id="page-content">
</div>
</div>
</body>

and the menu would replace #page-content of #outer-content using innerHTML so that outer-content would always exist. I would appreciate if anyone has some better idea though.
@BoPeng BoPeng changed the title parentElement not ready when htmx tries to swap it with another element parentElement of div not ready when htmx tries to swap it with another element using outerHTML Feb 2, 2022
@David-Guillot
Copy link
Contributor

Hi @BoPeng ,

Is the error occuring in case of very fast navigation? Like when a developer crazily clicks his application to stress-test it 😇 ? If so, my advice is to setup some production client-side error monitoring, to see how often it happens to your real users. If you're sure that real users are impacted, innerHTML seems the only way to go 😉

@BoPeng
Copy link
Contributor Author

BoPeng commented Apr 23, 2022

This happens a lot when I quickly browse around the site since each click will replace a large trunk of the page with a fairly complex one and all the loading and rendering takes time. I have fixed the problem by using innerHTML but thought that htmx could adjust the timing so that the new element will not be displayed before it is "hooked" to its parentElememt.

@BoPeng BoPeng mentioned this issue Jun 19, 2022
Closed
@danbluhmhansen danbluhmhansen mentioned this issue Feb 20, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@David-Guillot @BoPeng