I want to load a new page when I click one of the menu from sidebar. But the JavaScript load function doesn't work.
$(document).ready(function(){
$( 'button' ).click(function() {
$('#load').load('page1.html');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load"></div>
<button>Click to load a new page</button>Please need help.
Your Jquery code is correct. check in console error i think your page1.html is not found.
So, set correct page1.html file path.
If Page1.html path is correct then try this. it's work for me in chrome.
$(function() {
$( 'button' ).on('click', function() {
$('#load').load('page1.html');
});
});
Html code.
<div id="load"></div>
<button>Click me</button>
I have moved javascript code to the end of page and it works:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="load"></div>
<button>Click to load a new page</button>
<script>
$('button').click(function() {
$('#load').load('page1.html');
});
</script>
</body>
</html>
Try This
$(document).ready(function(){
$( 'button' ).on('click', function() {
$('#load').load('page1.html');
});
});
Add button type button to your button tag
<button type="button">Click to load a new page</button>
A couple of things -
Place your JS after your HTML to ensure all elements with the referenced IDs are loaded, or your code may not work.
You don't even need JQuery to do what you want. See the following snippet which uses the fetch() API built into all modern browsers (note you'll get an error displayed if you run the snippet below on this page because page1.html isn't available on StackOverflow)"
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="load" ></div>
<button id="clickme">Click to load a new page</button>
<script type="text/javascript">
(function() {
document.getElementById("clickme").onclick = function() {
fetch("page1.html")
.then(function(response) {
response.text().then(function (text) {
document.getElementById("load").innerHTML = text;
})
})
.catch(function(e) {
document.getElementById("load").innerHTML = `Error loading: ${e.message}`;
})
}
}());
</script>
</body>
</html>
page1.html.