Roymunson Roymunson - 2 months ago 19
HTML Question

Cannot load html from within html

I have

index.html
and
navbar.html
within the same folder. The
index.html
file has the following code:

<script src="js/jquery-3.1.0.min.js"></script>
<script>
$("#navBar").load("navbar.html");
</script>


The following
div
is within the
body


<div id="navBar"></div>


The
navbar
contains this test code:

<p> Test File </p>


The github repository is here: https://github.com/roymunsonstudios/roymunsonstudios.github.io

Why is it that this simple HTML import is not working?

UPDATE:

There is an error in the console:


jquery-1.11.3.min.js:5 XMLHttpRequest cannot load file:///Users/vroy/Developer/Website/roymunsonstudios.github.io/navbar.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.


The
index.html
file references 2 versions of JQuery. The one in the script. And another version of JQuery which is in the footer. However, for some reason the script is being run with the older version of JQuery even though I want it to use the newer version of JQuery. Should I change this?

UPDATE 2:

The error still happens with the latest version of JQuery.

Answer

The solution to the error was changing:

$("#navBar").load("navbar.html");

to:

$("#navBar").load("https://-to-navbar.html");

because the .load function only seems to work with URLs not files that are stored locally.

I also had to change the code slightly: (Credit to Rorymccrossan):

$(function() { <code> });
Comments