I have looked around but still can't get my code to load my html file. From my index.html file I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Anderson, Georgia Tech Professor</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#header').load('header.html');
alert("Does this load!!!??")
</script>
</head>
<body>
<div id="header"></div>
<section class="section_2 index_section">
...
</section>
...
</body>
</html>
And such. I included the alert for debugging purposes and it works fine, but it never loads my header.html file. I have included both files in the same directory and level.
My header.html includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!------------
- Header -
------------->
<header class="section_1" id="header">
<img src="Images/David's_typical_Profile_Picture.jpg" alt="David Anderson" id="prof_pic">
<h1 id="name_plate">
<a class="name_plate" href="about.html">David Anderson</a>
</h1>
<h2 id="institution_name">
Georgia Institute of Technology
</h2>
<nav id="main_nav">
<ul class="semantic_list">
<li><a href="index.html">Home</a></li>
<li><a href="courses.html">Courses</a>
<ul>
<li><a href="http://anderson.ece.gatech.edu/ece6254/index.html" target="_blank">ECE 6254</a></li>
<li><a href="http://anderson.ece.gatech.edu/ece6271/index.html" target="_blank">ECE 6271</a></li>
</ul>
</li>
<li><a href="lab.html">Lab</a></li>
<li><a href="consulting.html">Consulting</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
</html>
I have looked around everywhere, including Adding jQuery to sublime text 2, Why does jQuery or a DOM method such as getElementById not find the element?, https://learn.jquery.com/using-jquery-core/document-ready/ as well as websites about writing/including javascript: https://www.sitepoint.com/community/t/multiple-pages-without-repeating-the-site-structure/8251/3, https://www.sitepoint.com/community/t/calling-multiple-htmls-into-single-html-file/216583/2, but I still run into the same problem, where it simply doesn't load header.html. Ever.
I am loading it on safari using a local path, not a website. If anyone has a solution/or answer I'd be very grateful. Thanks!
