Load an HTML partial into a div using jquery -
help!
i have main page (index.html), , few partial pages (just html files). i'm trying load 1 of partials div on index.html page when clicking link in nav bar. thought jquery best this, partial never loads , error message "cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." i'm not sure what's causing this-- seems pretty straightforward code. here's 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 run code file system (file:///).
error message got, says: "cross origin requests supported protocol schemes: http ...".
this means, should run code using local web server, example, apache.
Comments
Post a Comment