Help!
I have a main page (index.html), and a few partial pages (just HTML files). I'm trying to load one of those partials into a div on my index.html page when clicking a link in the nav bar. I thought JQuery would be best for this, but the partial never loads and I get this error message "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." I'm not sure what's causing this-- it seems like pretty straightforward code. Here's what I have:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="partials/art.html">art</a></li>
<li><a href="partials/design.html"> design</a></li>
<li><a href="#" id="load_illustration"> illustration</a></li>
<li><img src="images/LOGO.png" height="150" width="160" alt="logo"></li>
<li><a href="partials/about.html"> about</a></li>
<li><a href=""> cv</a></li>
<li><a href="partials/contact.html"> contact</a></li>
</ul>
</div>
<div id="include">
</div>
<script>
$(document).ready(function(){
$("#load_illustration").on("click", function(){
$("#include").load("partials/illustration.html");
});
});
</script>
</body>
</html>
Looks like you run your code from the file system (file:///).
Error message you got, says: "Cross origin requests are only supported for protocol schemes: http ...".
This means, you should run your code using local web server, for example, apache.