0
I wonder why the load command is not loading the header.htmlfile. PS.: Both are in the same folder.
File: main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Showing Ajax Load Request Status in jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").load("header.html", function(responseTxt, statusTxt, jqXHR){
if(statusTxt == "success"){
alert("New content loaded successfully!");
}
if(statusTxt == "error"){
alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
}
});
});
});
</script>
</head>
<body>
<div id="box">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Load Content</button>
</body>
</html>
header.html file:
<h1>Simple Ajax Demo</h1>
<p id="hint">This is a simple example of Ajax loading.</p>
It’s not triggering the alerts?
– Sam
The ERROR alert is triggering. This means that the contents of the header.html file are not being placed in the DIV "box"
– user14272
Which message shows the alert? The alert has two variables that show exactly the error returned.
– Sam
Image - "Error: 0 error"
– user14272
This is working fine. See here
– Sam