I’m having a weird issue on a Webflow site I’m building for a radio station and can’t find a solution anywhere so I thought I’d try to ask you for some help.
I have this ajax page loader code to allow for continuous playback of the radio stream while browsing the site. That code works EXCEPT it breaks all other custom code when clicking on anything. There are no errors in the console and I have tried to move the code between the different code editors but the problem persists. I don’t know if the code clashes with Webflow somehow but the code is pure vanilla javascript so this issue is driving me mad.
If someone might have an idea of what the problem is please feel free to share your solution. I’d really appreciate it! Here’s the ajax code:
let main = document.querySelector('main');
window.addEventListener('popstate', function (e) {
requestPage(e.state, false);
});
function requestPage(url, push) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
main.innerHTML = xhr.responseText;
var title = (/<title>(.*?)<\/title>/m).exec(xhr.responseText)[1];
var headers = document.querySelectorAll('.header');
var footers = document.querySelectorAll('.footer');
if (headers.length > 1) {
headers[1].remove();
};
if (footers.length > 1) {
footers[1].remove();
};
attachLinkClickHandlers(main);
document.title = title;
if (push)
history.pushState(url, document.title, url);
}
};
xhr.open('get', url, true);
xhr.send();
}
function attachLinkClickHandlers(parent) {
let links = parent.querySelectorAll('a:not([href^="http"])');
[].forEach.call(links, function (link) {
link.addEventListener('click', function (e) {
requestPage(link.href, true);
e.preventDefault();
return false;
});
});
}
attachLinkClickHandlers(document);
history.replaceState(location.href, document.title, location.href);
