Problem with x-for and HTMX #4476
-
|
I have a serious problem when using x-for together with htmx. Here is my code. For simplicity I'm using a list (x-data) with one element The rendered page is this (only the body content): After clicking login link and then the back button, the rendered page is this: As you can see, a new div was added. Every time the back button is clicked, a new div appear. Browser is Edge. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
|
does it work if you use https://v1.htmx.org/extensions/alpine-morph/? |
Beta Was this translation helpful? Give feedback.
-
|
Not sure how this helps. Does the alpine morph replace htmx swapping mechanism so I don't need to use boost anymore? |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, I tried but no luck. |
Beta Was this translation helpful? Give feedback.
-
|
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 <!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> |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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). |
Beta Was this translation helpful? Give feedback.
-
|
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>
... |
Beta Was this translation helpful? Give feedback.
-
|
Yes, this did the trick. |
Beta Was this translation helpful? Give feedback.
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) => { …