JQuery not loading html file

Question

I'm learning HTML/JavaScript by building a sample website on my local computer. I am trying to reuse code and doing so by using JQuery; however it doesn't seem to actually do anything when I use the load function.

I am sampling this via Google Chrome browser.

I've seen examples using other methods such as php, straight javascript using document.write(), but I would like to know how to use it with JQuery

I have already tried:

--allow-file-access-from-file with google; as some posts show a known problem

Both html files are in the same location as well.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  html{

    background:radial-gradient(#505154,#28292b) no-repeat center center fixed;
    background-size:cover; 
  }
  </style>
  <title>WebPage</title>
  <link rel="icon" href="logo.ico"/>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="navigation"></div>
    <script> 
      $(function(){
        $("#navigation").load("nav.html"); 
      });
    </script> 
</body>
</html>

nav.html:

<p>This is my include file</p>

Is there something I am doing wrong; or missing?

Da Mahdi03 · Answer 1 · 2021-01-19T22:58:53.873

0

Move your JavaScript to the bottom of the file, right before </body> so that when it runs, your navigation is defined.

Edit (for more clarity):

As the browser loads a file, it reads from top to bottom and runs the JavaScript in real time, since you try to access an element that isn't defined until later on in the page, as by the jQuery standard your .load() will not do anything because the selector was not found.

edited Jan 19 '21 at 22:58

answered Jan 19 '21 at 22:54

Da Mahdi03

1,468
1
9
18

1

To clarify, javascript runs the moment the browser 'reads' it. So when the browser was reading your file from top to bottom, it read: `$("#navigation").load("nav.html");`. But it hasn't read `
` yet. So it doesn't know the location yet. It's a good practice to place JS at the bottom of any file, to make sure the page is fully read (loaded) before executing any JS – Kerwin Sneijders Jan 19 '21 at 22:56
@KerwinSneijders Okay; i've updated it; but it still seems to not work. I also updated my question code. – Jas Jan 19 '21 at 22:59
Make sure you close your script tag at the top when you add jQuery – Da Mahdi03 Jan 19 '21 at 23:04
Yea fixed that; still nothing. – Jas Jan 19 '21 at 23:07

score 0 · Answer 2 · edited Jan 21 '21 at 00:54

I tested your code locally and it works fine.

By any chance are you running the HTML file in your browser using: file://... as url? If so, you need something to host it on, I'm using XAMPP. You can find more here:

Cross-origin request for local file

PS: Most likely you can see an error if you open the dev tools with F12 and going to console. Something like:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///........

JQuery not loading html file

2 Answers2