htmx
htmx copied to clipboard
bigskysoftware
Flatpicker and bootstrap date picker requires full page refresh to show.
When I load a Django form though as html partial the ie hx-get , date picker pops correctly in version 1.9.11 and below.Upgraded htmx 2 does not load the date picker until I refresh the full page.
Could you share the initialization you have currently setup that is working in 1.9.11 (and not in 2.x) that will initialize these inputs after they are swapped in? It may be that the behavior around the swap you are targeting has changed slightly.
The only thing I can see in https://htmx.org/migration-guide-htmx-1/ that could cause an issue is if you have something like hx-on= solving the date picker issue in v1 which needs updating to the new hx-on format. Also check any htmx extensions are upgraded as head-support extension could be in use to load the date picker's javascript dependency from the partial response.
If you can observe this video to understand the context of the behaviour am describing it would help.This is the version that works with htmx 1
On Thu, Dec 19, 2024 at 2:53 AM MichaelWest22 @.***> wrote:
The only thing I can see in https://htmx.org/migration-guide-htmx-1/ that could cause an issue is if you have something like hx-on= solving the date picker issue in v1 which needs updating to the new hx-on format. Also check any htmx extensions are upgraded as head-support extension could be in use to load the date picker's javascript dependency from the partial response.
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/3084#issuecomment-2552486448, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOTDQAI7CHB24QQ2KH4FKM32GIDGNAVCNFSM6AAAAABTZGKRGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJSGQ4DMNBUHA . You are receiving this because you authored the thread.Message ID: @.***>
htmx.onLoad(function(elt){ flatpickr("#id_lending_date", { enableTime: true, dateFormat: "Y-m-d H:i", }); })
On Thu, Dec 19, 2024 at 9:48 PM Coding Simplified. < @.***> wrote:
If you can observe this video to understand the context of the behaviour am describing it would help.This is the version that works with htmx 1
On Thu, Dec 19, 2024 at 2:53 AM MichaelWest22 @.***> wrote:
The only thing I can see in https://htmx.org/migration-guide-htmx-1/ that could cause an issue is if you have something like hx-on= solving the date picker issue in v1 which needs updating to the new hx-on format. Also check any htmx extensions are upgraded as head-support extension could be in use to load the date picker's javascript dependency from the partial response.
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/3084#issuecomment-2552486448, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOTDQAI7CHB24QQ2KH4FKM32GIDGNAVCNFSM6AAAAABTZGKRGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJSGQ4DMNBUHA . You are receiving this because you authored the thread.Message ID: @.***>
The above code is working with htmx 2
On Thu, Dec 19, 2024 at 10:06 PM Coding Simplified. < @.***> wrote:
htmx.onLoad(function(elt){ flatpickr("#id_lending_date", { enableTime: true, dateFormat: "Y-m-d H:i", }); })
On Thu, Dec 19, 2024 at 9:48 PM Coding Simplified. < @.***> wrote:
If you can observe this video to understand the context of the behaviour am describing it would help.This is the version that works with htmx 1
On Thu, Dec 19, 2024 at 2:53 AM MichaelWest22 @.***> wrote:
The only thing I can see in https://htmx.org/migration-guide-htmx-1/ that could cause an issue is if you have something like hx-on= solving the date picker issue in v1 which needs updating to the new hx-on format. Also check any htmx extensions are upgraded as head-support extension could be in use to load the date picker's javascript dependency from the partial response.
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/3084#issuecomment-2552486448, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOTDQAI7CHB24QQ2KH4FKM32GIDGNAVCNFSM6AAAAABTZGKRGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJSGQ4DMNBUHA . You are receiving this because you authored the thread.Message ID: @.***>
But it got lots of errors
On Thu, 19 Dec 2024, 22:07 Coding Simplified., < @.***> wrote:
The above code is working with htmx 2
On Thu, Dec 19, 2024 at 10:06 PM Coding Simplified. < @.***> wrote:
htmx.onLoad(function(elt){ flatpickr("#id_lending_date", { enableTime: true, dateFormat: "Y-m-d H:i", }); })
On Thu, Dec 19, 2024 at 9:48 PM Coding Simplified. < @.***> wrote:
If you can observe this video to understand the context of the behaviour am describing it would help.This is the version that works with htmx 1
On Thu, Dec 19, 2024 at 2:53 AM MichaelWest22 @.***> wrote:
The only thing I can see in https://htmx.org/migration-guide-htmx-1/ that could cause an issue is if you have something like hx-on= solving the date picker issue in v1 which needs updating to the new hx-on format. Also check any htmx extensions are upgraded as head-support extension could be in use to load the date picker's javascript dependency from the partial response.
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/3084#issuecomment-2552486448, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOTDQAI7CHB24QQ2KH4FKM32GIDGNAVCNFSM6AAAAABTZGKRGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJSGQ4DMNBUHA . You are receiving this because you authored the thread.Message ID: @.***>
htmx.onLoad(function(newContent){
$("#id_lending_date").flatpickr();
});
this code finally solved it.
On Thu, Dec 19, 2024 at 11:01 PM Coding Simplified. < @.***> wrote:
But it got lots of errors
On Thu, 19 Dec 2024, 22:07 Coding Simplified., < @.***> wrote:
The above code is working with htmx 2
On Thu, Dec 19, 2024 at 10:06 PM Coding Simplified. < @.***> wrote:
htmx.onLoad(function(elt){ flatpickr("#id_lending_date", { enableTime: true, dateFormat: "Y-m-d H:i", }); })
On Thu, Dec 19, 2024 at 9:48 PM Coding Simplified. < @.***> wrote:
If you can observe this video to understand the context of the behaviour am describing it would help.This is the version that works with htmx 1
On Thu, Dec 19, 2024 at 2:53 AM MichaelWest22 @.***> wrote:
The only thing I can see in https://htmx.org/migration-guide-htmx-1/ that could cause an issue is if you have something like hx-on= solving the date picker issue in v1 which needs updating to the new hx-on format. Also check any htmx extensions are upgraded as head-support extension could be in use to load the date picker's javascript dependency from the partial response.
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/3084#issuecomment-2552486448, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOTDQAI7CHB24QQ2KH4FKM32GIDGNAVCNFSM6AAAAABTZGKRGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJSGQ4DMNBUHA . You are receiving this because you authored the thread.Message ID: @.***>
Hello @MichaelWest22 and @benjaminsampica . I have a similar problem. Libraries like "selectize.js" and "Ion.RangeSlider" do not work properly after the migration to v2.
These jQuery-based libraries are supposed to hide the initial and
The problem is that after an HTMX swap, they keep working, but the original and
I tried following the migration guide, but even then this happened. Excuse me for my ignorance and thank you in advance for your help!
UPDATE: Solved it with: htmx.config.attributesToSettle = [];
I posted the problem on Reddit and someone suggested I tried it.
Can you give the full code
On Thu, 30 Jan 2025, 22:16 Isaac Felizardo, @.***> wrote:
UPDATE: Solved it with: htmx.config.attributesToSettle = [];
I posted the problem on Reddit and someone suggested I tried it.
— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/htmx/issues/3084#issuecomment-2625364385, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOTDQAM45BDNF4X2N26WI4D2NJ3ALAVCNFSM6AAAAABTZGKRGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMRVGM3DIMZYGU . You are receiving this because you authored the thread.Message ID: @.***>
document.addEventListener("htmx:afterSwap", function(event) { // Ensure the swap was successful if (event.detail.successful) { console.log("HTMX swap completed, reinitializing libraries...");
// Example: Reinitialize a library (e.g., a tooltip library)
if (typeof initializeTooltips === "function") {
initializeTooltips();
}
// Example: Reinitialize a date picker
if (typeof flatpickr === "function") {
document.querySelectorAll(".datepicker").forEach(el => {
flatpickr(el, {});
});
}
// Example: Reinitialize a carousel (e.g., Swiper)
if (typeof Swiper === "function") {
document.querySelectorAll(".swiper-container").forEach(el => {
new Swiper(el, { /* swiper options */ });
});
}
// Add more library reinitializations as needed...
}
}); initialize your scripts after javascript settle