HTMX and Uncaught RangeError on second ajax call

77 Views Asked by At

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.

0

There are 0 best solutions below