-1

I am trying to use the jQuery .load() function to load a partial (in this case the navbar) into a specific div (using the id I've given it as the target). While developing the site I am building I have been using Gulp, and the way I have set it up works great. The header loads and works correctly, no problem. Where I am running into an issue is if I try to load the files locally without running Gulp. Most of the elements, CSS, JS executes without issue, and the jQuery CDN is loading fine according to the developer tools network tab, but the html file that contains the Navbar partial that I am trying to pass into the .load() function is nowhere to be found. I've tried changing the placement of the specific script tags, changing the name of the file, etc, but nothing seems to work. ` 

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>STHR | NEWS</title>
      <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="./css/main.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(function(){
      $('#header').load('../_header.html');
      $('#footer').load('../_footer.html');
    });
  </script>
</head>
<body>
  <div id="header"></div>`

I am getting these two errors in the console:

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) @ bootstrap.min.js:6

jquery.min.js:4 XMLHttpRequest cannot load file:///Users/andrewpohl/personal_websites/STHR/_header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

UPDATE: I did some further research into the error about the XMLHttpRequest, and apparently this becomes an issue if you're not running your files through a local server. I was unaware of this issue and was just opening up my files via the command line straight to the browser, without setting up a simple server. Once I started using a simple Python server I noticed that the header began to load without the use of gulp.

Andy Pohl
  • 243
  • 4
  • 14
  • Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Don't post *pictures* of code/markup. Post the code/markup. Show what you've tried. Say what it did, and what you expected it to do instead. Note any errors from the console (and if there are none, note that you've looked, and there are none). – T.J. Crowder Aug 14 '16 at 09:43
  • T.J. I appreciate your response and the information. I have to ask though, why no pictures of code markup? – Andy Pohl Aug 14 '16 at 09:50
  • Can't be searched, can't be copied and pasted, hard to read on various screen sizes, hard to read if your color perception is "different," ... – T.J. Crowder Aug 14 '16 at 09:51
  • Cool, that makes total sense. Thank you – Andy Pohl Aug 14 '16 at 09:53
  • Why are people downvoting this question? – Andy Pohl Aug 14 '16 at 19:12

2 Answers2

0

use ready function to this

<script type="text/javascript">
   jQuery(document).ready(function(){
      jQuery("#header").load("");
      jQuery("#footer").load("");
   });
</script>
Sameera Prasad Jayasinghe
  • 1,690
  • 1
  • 13
  • 15
0
$(function(){
    $('#header').load('../_header.html');
}

You have to tell JQuery to wait for the DOM to be loaded before you can act on it. At the end of the <head> tag, there's still no #header loaded in the DOM.

Loic Coenen
  • 773
  • 3
  • 8
  • 19
  • *"You have to tell JQuery to wait for the DOM to be loaded before you can act on it."* No, you don't *have* to. You can just put your `script` tags at the end of `body`, just before the closing `

    ` tag, which is largely where they belong.

     – T.J. Crowder Aug 14 '16 at 09:50
  • I have tried both wrapping the .load function in a .ready function as well as putting the script tags just before the

    tag, neither work

     – Andy Pohl Aug 14 '16 at 10:01
  • T.J. I know that, but I tends to think it's an inelegant (thought faster) solution if you're not in production context. – Loic Coenen Aug 14 '16 at 10:07
  • Open a webconsole and try loading it by hand. Does ```$.load('../_header.html')``` return the correct snippet? – Loic Coenen Aug 14 '16 at 10:10
  • I tried running that in the console and it did not do anything I'm afraid – Andy Pohl Aug 14 '16 at 17:30