So for clarity, here's how my 'website' works:
- I load a HTML File (index.html)
- Javascript (index.js) checks whether the user is authenticate (not necessarily relevant here)
- Javascript (index.js) sends a XMLHttpRequest to a php file on the server which checks authentication and then returns a HTML file (result.html) to be included in the index.html file.
My Issue is that the the returned HTML file/content (result.html) needs a seperate Javascript file (let's call it result.js), but it does not seem to be loaded in when result.html is being loaded/returned. The CSS file hoever is being loaded in.
How do I circumvent the issue? Or am I just simply doing something wrong? Hope this question is clear enough!
Here are the mentioned files:
index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body onload="initDoc()">
<div id "content-loader">
</div>
</body>
</html>
index.js:
function initDoc(){
document.getElementById("content-loader").innerHTML = null;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("content-loader").innerHTML = this.responseText;
}
if (this.status == 404) {document.getElementById("content-loader").innerHTML = "Doc not found";}
}
}
xhttp.open("GET", "/php/authentication.php?var=" + "examplevar");
xhttp.send();
}
result.html:
<!DOCTYPE html>
<html lang="de">
<head>
<script src="js/result.js"></script>
<link rel="stylesheet" href="css/result.css">
</head>
<body>
Content here
</body>
</html>
result.js doesn't really matter as it doesn't get loaded in..