-
|
I have a strange issue with HTMX and alpine. Unfortunately it needs a backend service to run for the HTMX AJAX. If anyone knows of an online way to setup a backend and frontend that would help to show the issue. Here is my setup: <!doctype html>
<html>
<head>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
crossorigin="anonymous"
></script>
<meta name="htmx-config" content='{"includeIndicatorStyles": false}' />
</head>
<body id="admin-body" class="">
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq"
crossorigin="anonymous"
></script>
<style>
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
.text-yellow {
color: yellow;
}
.box {
width: 100px;
height: 100px;
}
</style>
<button
type="button"
x-data="{ fakeAJAX() { element = getElement(); console.log(element); dialogContainer = document.getElementById('admin-dialog'); dialogContainer.innerHTML = element; } }"
hx-get="/admin/edit/test"
hx-swap="innerHTML"
hx-target="#admin-dialog"
hx-trigger="click"
>
Input
</button>
<div id="admin-dialog"></div>
</body>
</html>and an AJAX call to this template when clicking the button <div id="dialog" x-data="{ show: true }" x-show="show">
<div>
<form id="test-form">
<div>
<div x-data="{ input: false }">
<div id="test" class="text-yellow box" :class="{ 'bg-blue' : input, 'bg-red': !input }"></div>
</div>
</div>
</form>
<button type="button" @click="show=false">
Hide
</button>
</div>
</div>The first time it works perfectly fine. If you click the hide button and click Input again the :class are applied and then instantly removed again (you see the color flash). If I remove the id="test" from the input it works without issue. Unfortunately I need ids to target some events. Not sure what to make of it. I checked the alpine code and the class gets applied, but maybe there is an HTMX event that resets it? |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 6 replies
-
|
I found a workaround by using the :id="'test'" directive. Still would be nice if someone has a look. |
Beta Was this translation helpful? Give feedback.
-
|
There's a htmx official plugin (from the htmx team) that you are supposed to use if you want to swap part of an Alpine component. I suspect it has to do with the way htmx patches the dom by default. |
Beta Was this translation helpful? Give feedback.
-
|
There is an HTMX plugin for alpine-morph but not vanilla alpine after searching a bit. |
Beta Was this translation helpful? Give feedback.
-
|
Yep, that's what I was talking about. Htmx is "morphing" the Dom when you do a swap but the way htmx patches the dom by default is not alpine friendly so the plugin uses alpine morph for the swap which prevents some issues |
Beta Was this translation helpful? Give feedback.
-
|
I tested with the alpine-morph extension and the issue persists. It is fine though the :id works for now. I probably have to ask the HTMX developers if they now what the issue might be. <!doctype html>
<html>
<head>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
crossorigin="anonymous"
></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<meta name="htmx-config" content='{"includeIndicatorStyles": false}' />
</head>
<body id="admin-body" class="">
<script src="https://unpkg.com/[email protected]/alpine-morph.js"></script>
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq"
crossorigin="anonymous"
></script>
<style>
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
.text-yellow {
color: yellow;
}
.box {
width: 100px;
height: 100px;
}
</style>
<button
type="button"
x-data="{ fakeAJAX() { element = getElement(); console.log(element); dialogContainer = document.getElementById('admin-dialog'); dialogContainer.innerHTML = element; } }"
hx-get="/admin/edit/test"
hx-target="#admin-dialog"
hx-trigger="click"
hx-ext="alpine-morph" hx-swap="morph"
>
Input
</button>
<div id="admin-dialog"></div>
</body>
</html>Thanks for the hint anyway |
Beta Was this translation helpful? Give feedback.
-
|
It may still be broken but you did not import the alpine morph plugin. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, I added the import in my last post, unfortunately still no luck. |
Beta Was this translation helpful? Give feedback.
-
I think this might be a bit of an XY. Why would you need an id for this? You could switch it to a |
Beta Was this translation helpful? Give feedback.
-
|
I guess I could always use another selector to target the element, ids just seems like the best fit. I also was under the impression that HTMX always replaces the full element, only keeping parts if hx-preserve is set. |
Beta Was this translation helpful? Give feedback.
-
|
That would be what a quick look at the docs would suggest. but actually, it uses https://htmx.org/docs/#css_transitions So it will copy the old elements attributes onto the new one, then change them after a moment, which can then cause issues. |
Beta Was this translation helpful? Give feedback.
-
|
I see, thanks for looking this up. At least we got to the issue with ids interfering. I will use :id for now and worry about swap transitions at some later point. Currently my approach is to have UI components with alpine state to control transitions locally, and using HTMX to load and swap whole components. The only missing bit is in-flight transitions but not sure the id issue would apply there. |
Beta Was this translation helpful? Give feedback.
That would be what a quick look at the docs would suggest.
but actually, it uses
idto preserve elements attributes, which is made more clear inhttps://htmx.org/docs/#css_transitions
So it will copy the old elements attributes onto the new one, then change them after a moment, which can then cause issues.