Problem with x-for and HTMX #4476

florian-sun · 2024-12-12T03:13:21Z

florian-sun
Dec 12, 2024

I have a serious problem when using x-for together with htmx.
If a have the htmx attribute hx-boost enabled, when I click the browser back button the elements in the x-for template are duplicated.

Here is my code. For simplicity I'm using a list (x-data) with one element

<!DOCTYPE html>
<html>
<head>
	<script src = "https://unpkg.com/[email protected]" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
	<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>   

  <div  hx-boost="true"> 
    <a  href="/login"> Login </a>

    <template  x-data="{ items: ['foo'] }" x-for="item in items" :key="item"> 
      <div > 
        <p  x-text="item"> </p>
      </div>
    </template>
  </div>

</body>
</html>

The rendered page is this (only the body content):


<div hx-boost="true"> 
  <a href="/login"> Login </a>

  <template x-data="{ items: ['foo'] }" x-for="item in items" :key="item" > 
    <div> 
      <p x-text="item"> </p>
    </div>
   </template>
   <div> 
     <p x-text="item">foo</p>
   </div>
</div>

After clicking login link and then the back button, the rendered page is this:

<div hx-boost="true"> 
  <a href="/login"> Login</a>

  <template x-data="{ items: ['foo'] }" x-for="item in items" :key="item"> 
    <div> 
      <p x-text="item"> </p>
    </div>
  </template>
  <div> 
    <p x-text="item">foo</p>
  </div>
  <div> 
    <p x-text="item"></p>
  </div>
</div>

As you can see, a new div was added. Every time the back button is clicked, a new div appear.
In this case it's not much damage because the duplicated content is empty. However usually I have more then one element in the root div and all of them are duplicated.

Browser is Edge.
The login page is this

<body >
<p> login page</p>
</body>

Answered by SimoTod

Dec 13, 2024

This is a simple snippet of code to fix x-for and x-if when used with the HTMX history

    ...
    <script src = "https://unpkg.com/[email protected]" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    <script>
        document.addEventListener('htmx:beforeHistorySave', (evt) => {
            document.querySelectorAll('[x-for]').forEach((item) => {
                item._x_lookup && Object.values(item._x_lookup).forEach((el) => el.remove())
            })
            document.querySelectorAll('[x-if]').forEach((item) => {
        …

View full answer

SimoTod · 2024-12-12T11:43:54Z

SimoTod
Dec 12, 2024
Collaborator

does it work if you use https://v1.htmx.org/extensions/alpine-morph/?

0 replies

florian-sun · 2024-12-12T14:07:22Z

florian-sun
Dec 12, 2024
Author

Not sure how this helps. Does the alpine morph replace htmx swapping mechanism so I don't need to use boost anymore?

1 reply

SimoTod Dec 12, 2024
Collaborator

No, you still need to use boost. The internal swapping algorithm used by htmx is not fully compatible with Alpine because it removes all the hidden metadata added by Alpine, that addon just change it so Htmx uses alpine morph instead.

florian-sun · 2024-12-12T22:25:12Z

florian-sun
Dec 12, 2024
Author

Thanks, I tried but no luck.
Actually what I did was just installing the extension. As you see in my example, I am not using any swapping or other htmx stuff, I'm just adding the attribute and that alone is enough to cause this problem.

6 replies

SimoTod Dec 13, 2024
Collaborator

I think hx-boost internally swaps the html. it does an ajax call to fetch the new content and swap it in your page without fully reloading the rest. I've tried anyway and it doesn't help as you said, when you click back htmx is restoring the html from local storage, which also contains the html generated by x-for but when inserted in page in that way, alpine cannot link it correctly anymore.

As a workaround, add hx-history="false" on the parent element inside x-for so htmx will not cache it (you probably have to empty the local storage).

<!DOCTYPE html>
<html>
<head>
        <script src = "https://unpkg.com/[email protected]" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>

  <div hx-boost="true">
    <a href="/login.html"> Login </a>

    <template x-data="{ items: ['foo'] }" x-for="item in items" :key="item">
      <div hx-history="false">
        <p x-text="item"> </p>
      </div>
    </template>
  </div>

</body>
</html>

SimoTod Dec 13, 2024
Collaborator

i suggest you add it to any x-for and also x-if as I suspect that directive is going to have the same issue if used with HTMX

SimoTod Dec 13, 2024
Collaborator

In theory, you can also write a plugin for htmx that hooks into the htmx:beforeHistorySave event and remove the content generated from x-for and x-if from the cache snapshot (more performant then hx-history="false" because the latter will just disable the cache for that page).
I wrote something similar for turbolinks a while ago

SimoTod Dec 13, 2024
Collaborator

This is a simple snippet of code to fix x-for and x-if when used with the HTMX history

    ...
    <script src = "https://unpkg.com/[email protected]" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    <script>
        document.addEventListener('htmx:beforeHistorySave', (evt) => {
            document.querySelectorAll('[x-for]').forEach((item) => {
                item._x_lookup && Object.values(item._x_lookup).forEach((el) => el.remove())
            })
            document.querySelectorAll('[x-if]').forEach((item) => {
                item._x_currentIfEl && item._x_currentIfEl.remove()
            })
        })
    </script>
    ...

Answer selected by florian-sun

florian-sun Dec 14, 2024
Author

Yes, this did the trick.
Also the one you showed before with hx-history="false" works but not completely. I must check also for the header HX-History-Restore-Request and load the full page when it happens. This one is much better.
Thanks a lot!

believelody Dec 27, 2024

This is a simple snippet of code to fix x-for and x-if when used with the HTMX history

    ...
    <script src = "https://unpkg.com/[email protected]" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    <script>
        document.addEventListener('htmx:beforeHistorySave', (evt) => {
            document.querySelectorAll('[x-for]').forEach((item) => {
                item._x_lookup && Object.values(item._x_lookup).forEach((el) => el.remove())
            })
            document.querySelectorAll('[x-if]').forEach((item) => {
                item._x_currentIfEl && item._x_currentIfEl.remove()
            })
        })
    </script>
    ...

We need to make it as an extension or whatever we can do !!! Save a lot of despairing time lol. Same thing for x-if has to be done as well. Thanks a lot @SimoTod 🙏🏿

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with x-for and HTMX #4476

{{title}}

Replies: 3 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Problem with x-for and HTMX #4476

florian-sun Dec 12, 2024

Replies: 3 comments · 7 replies

SimoTod Dec 12, 2024 Collaborator

florian-sun Dec 12, 2024 Author

SimoTod Dec 12, 2024 Collaborator

florian-sun Dec 12, 2024 Author

SimoTod Dec 13, 2024 Collaborator

SimoTod Dec 13, 2024 Collaborator

SimoTod Dec 13, 2024 Collaborator

SimoTod Dec 13, 2024 Collaborator

florian-sun Dec 14, 2024 Author

believelody Dec 27, 2024

florian-sun
Dec 12, 2024

Replies: 3 comments 7 replies

SimoTod
Dec 12, 2024
Collaborator

florian-sun
Dec 12, 2024
Author

SimoTod Dec 12, 2024
Collaborator

florian-sun
Dec 12, 2024
Author

SimoTod Dec 13, 2024
Collaborator

SimoTod Dec 13, 2024
Collaborator

SimoTod Dec 13, 2024
Collaborator

SimoTod Dec 13, 2024
Collaborator

florian-sun Dec 14, 2024
Author