CODEWITHSUNDEEP
javascriptjqueryhtml
msarlo
msarlo

Reputation: 117

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).

custom.js

$(document).ready(function(){
  $("#about").click(function(event){
    event.preventDefault();
      $(".main-content").fadeToggle("slow", function(){
        $(this).load("about-us.html")
      });
   });
});

index.html

<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>
</div>

Upvotes: 0

Views: 68

Answers (1)

msarlo
msarlo

Reputation: 117

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.

Upvotes: 1

Related Questions