I have started HTMX today and have the same problem on two different pages of my site.
In the first a load content into div using button:
<li class="content_first_tabs_li"
data-panel="content_panel_my_waitlists"
hx-post="/waitlist/show_all"
hx-trigger="click"
hx-target="#wrap_waitlist"
hx-swap="innerHTML"
>
on another I submit a form using submit button (I have already tried using "submit" trigger on form
<button class="button is-rounded is-success" hx-post="/tags/create_new" hx-target="#wrap_user_tags" hx-swap="afterbegin" hx-trigger="click delay:500ms">
Both of them work just great when triggered for the first time but when i trigger them for the second time I get error in console:
Uncaught RangeError: Maximum call stack size exceeded
When I open the error details in edge dev tools I get this:
function newXHR() {
const realXHR = new window.oldXHR();
realXHR.addEventListener("readystatechange", function() {
// Only success responses and URLs that do not contains "debugbar_time" are tracked
if (realXHR.readyState === 4 && realXHR.status.toString()[0] === '2' && realXHR.responseURL.indexOf('debugbar_time') === -1) {
if (realXHR.getAllResponseHeaders().indexOf("Debugbar-Time") >= 0) {
let debugbarTime = realXHR.getResponseHeader('Debugbar-Time');
if (debugbarTime) {
let h2 = document.querySelector('#ci-history > h2');
if (h2) {
h2.innerHTML = 'History <small>You have new debug data.</small> <button onclick="loadDoc(' + debugbarTime + ')">Update</button>';
document.querySelector('a[data-tab="ci-history"] > span > .badge').className += ' active';
}
}
}
}
}, false);
return realXHR;
}
In this code function newXHR()
is highlighted as en error
Any help would be greatly appreciated!
I have tried all the different triggers and delays with no success.