Loading Navbar from Separate HTML File Not Working

Question

After reading a couple of other posts on Stack Overflow, I decided to use the jQuery method of adding a navbar to index.html whose code is in header.html. However, the navbar is not showing up on index.html, and the console says that there is an "Access to XMLHttpRequest error". Could someone please tell me why this error is appearing?

Here is my HTML for index.html:

<!DOCTYPE html>
<html>

<head> 


    <link href="header+footer.css" rel = "stylesheet" type="text/css" />
    <link href="index.css" rel = "stylesheet" type="text/css" />

     <meta charset="utf-8">
    <title> The Novel Column - Book Reviews </title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 

    <script> 
        $(function(){
        $("#includedContent").load("header.html"); 
        });
    </script> 

 </head> 


<body>


     <div id="includedContent"></div>

Here is my HTML for header.html:

<nav>
    <img class="logo" src="images/other/logo.jpg">

    <h1> <a href="index.html"> The Novel Column </a> </h1>

    <ul>

      <li> <a href="about.html"> About </a> </li>
    </ul>



</nav>

Thanks in advance for your help!

is your header file in the same folder as the file referencing it? — Claire, Jun 17 '19 at 20:01
XMLHttpRequest Error will be solved when you run your code on a server. Locally you can use XAMPP for the testing purpose. — Shovan, Jun 17 '19 at 20:15
How can someone possibly help when you haven't shared the exact error you are getting? — EternalHour, Jun 17 '19 at 20:24

Shovan · Answer 1 · 2019-06-17T20:19:39.570

You can simply include the jQuery.js and load the HTML file using

$("#DivContent").load("yourFile.html");

For example

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
       $("#DivContent").load("another_file.html"); 
      });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

Note: inside load() method, make sure you are writing the right path of your external file.
XMLHttpRequest Error will be solved when you run your code on a server. Locally you can use XAMPP for the testing purpose

There are some third-party methods available like this .

<!DOCTYPE html>
<html>
 <script src="http://www.w3schools.com/lib/w3data.js"></script>

 <body>

  <div w3-include-html="content.html"></div> 

  <script>
    w3IncludeHTML();
  </script>

 </body>
</html>

I hope, My Answer will help you to understand. Thanks

score 0 · Answer 2 · answered Jun 17 '19 at 20:07

0

This is normal if you are not working on a localhost. Try working on Apache or IIS servers.

here you can learn what the error is : XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

answered Jun 17 '19 at 20:07

Muhammed Alper Uslu

56
8

Loading Navbar from Separate HTML File Not Working

2 Answers2