I'm trying to make a script that imports my site's header into each page. I have already seen these pages:
I followed these sites, and I still get this error in the console:
jQuery.Deferred exception: Object doesn't support property or method 'load'
TypeError: Object doesn't support property or method 'load'
at Anonymous function (http://localhost/header-footer.js:4:5)
at l (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29559)
at Anonymous function (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29869) undefined
My index.html has the following in the body section:
<div id="header"></div>
<script src="..." integrity="..." crossorigin="anonymous"></script> <!--jQuery-->
<script src="/header-footer.js"></script> <!--Shown below-->
The header-footer.js file includes:
$(document).ready(function () {
var header = $("#header");
header.addClass("container-fluid clearfix"); // Bootstrap classes (unrelated as far as I know)
header.load("/header.html");
});
I would just like to be able to import my header.html file into my index.html file.
I don't think this is related to the error, but here are the contents of my header.html file:
<ul class="list-inline">
<li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownButton">
<a class="dropdown-item" href="...">Another page</a>
</div>
</div>
</li>
<li><a class="btn btn-primary" href="/" role="button">Home</a></li>
<li class="lead" style="float: left;">Website Name</li>
</ul>
<hr>
What silly mistake have I made? Thank you!
