bigskysoftware/htmx

Exposing saveCurrentPageToHistory via js API

Wulfheart opened this issue · 0 comments

When working with boosted error responses like e.g. in Laravel it can occur that there is a custom error page with custom head tags which have nothing to do with my htmx-powered application. This site is totally different and it is not enough to "just" swap the body.
I solved this using the following code:

document.body.addEventListener('htmx:beforeOnLoad', function (evt) {
    if (evt.detail.xhr.status >= 400) {
        htmx.saveCurrentPageToHistory()
        document.location = evt.detail.xhr.responseURL;
        let iframe = document.createElement('iframe');
        document.getElementById('htmx-error-modal-content').appendChild(iframe);
        iframe.src = 'about:blank';
        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write(evt.detail.xhr.responseText);
        iframe.contentWindow.document.close();
        document.getElementById('htmx-error-modal-backdrop').style.display = 'block';
    }
});

Without the exported htmx.saveCurrentPageToHistory() the forward/backward buttons would not work properly. Therefore, I propose to add it to the exported functions.

Thank you in advance