I have this code:
window.onload= function() {
window.scrollTo(0, 0.9);
if (navigator.standalone) return;
for (var i= document.links.length; i-->0;) {
document.links[i].onclick= function() {
var req= new XMLHttpRequest();
req.onreadystatechange= function() {
if (this.readyState!==4) return;
document.body.innerHTML= this.responseText;
};
req.open('GET', this.href, true);
req.send();
return false;
};
}
};
It basically gets the href of an a that is clicked and loads that href into the current body. Now the problem is that it only works once. Once the content gets changed, as soon as I click another link (on the new page) it redirects and the url changes. Then the ajax works again since I “really” changed pages and reset the entire thing.
I’m kind of lost here. How can I reset my function to work forever?
Thanks,
Christopher
EDIT:
Ok so I tried something like this:
function ajax(){
if (navigator.standalone) return;
for (var i= document.links.length; i-->0;) {
document.links[i].onclick= function() {
var req= new XMLHttpRequest();
req.onreadystatechange= function() {
if (this.readyState!==4) return;
document.body.innerHTML= this.responseText;
};
req.open('GET', this.href, true);
req.send();
ajax();
return false;
};}
}
window.onload= function() {
window.scrollTo(0, 0.9);
ajax();
};
But to no avail… calling the ajax() function when it finishes is not enough apparently. Can anyone help me a bit more :s. This isn’t my field of expertise :).
You’ll have to re-establish the “click” handler after blasting the original
<body>contents with the response. Since everything in the old DOM is gone after the response comes back, the handler binding is gone too.