What I'm trying to do
Load an HTML file into a content block on a page with the .load function in a linked .js file using a local server.
What I'm using
HTML
CSS
Javascript/jQuery
WAMP
Chrome
Windows 10
The problem
I can successfully do this inside the page, but can't get it working when using linked files (as a matter of fact, I can't get any JavaScript to work when I use linked files), and I'd rather be able to maintain a separate .js file.
What I've done
- checked spelling
- checked file paths
- read similar SO questions and comments (didn't help)
- restarted my computer (why not?)
- Before using WAMP, tried starting Chrome with local file access allowed. That worked for several minutes... until it didn't anymore.
Notes
- I'm fairly new to JavaScript and jQuery.
- The linked .css files have never given me any trouble.
- Yes, nav.html is in the same directory as index.html.
- Yes, the js folder is in the same directory as index.html, and design.js is indeed inside that folder.
- WAMP icon is green and I was able to set up the VirtualHost succesfully.
Code that doesn't work for me
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="js/design.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
</body>
</html>
design.js
$(document).ready(function() {
loadNav();
});
function loadNav(){
$('nav').load('nav.html');
}
OR
design.js
$(document).ready(function() {
$('nav').load('nav.html');
});
Code that works for me
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('nav').load('nav.html');
});
</script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
</body>
</html>
OR
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
<script>
$('nav').load('nav.html');
</script>
</body>
</html>
