msarlo msarlo - 6 months ago 8
Javascript Question

jQuery won't load external html template using .load()

I'm attempting to use jQuery to change the main content area of my homepage when a nav link is clicked. I'm using .load() to do this, but the external html page I'm referencing simply won't load (nothing happens).


$(".main-content").fadeToggle("slow", function(){


<div class="inner cover main-content">
<h1 class="cover-heading">A heading</h1>
<p class="lead">This is the best page of all time.</p>


Figured I'd answer my own question since it took hours to figure out something so trivial.

If you're loading jQuery locally, you must run the file using a local web server like MAMP rather than just "clicking" on it (e.g. loading the file in a browser).

jQuery won't load external files if they aren't served from some kind of web server.

If you check the console, you'll see an error that says something like:

MLHttpRequest cannot load file:///Users/yourname/filepath/index.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.