0

I am trying to add a nav page without body and html tag to a html page using JavaScript(j Query). but its not working . i tried changing the browser and used firefox,Crome as well as edge. but it did not work.

this is code structure.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>demo</title>
</head>

<body>

    <div id="content"></div>
    <script>
        $(document).ready(function() {

            $('#content').load("nav.html");

        });
    </script>


</body>

</html>

i also tried this as well.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>dem0</title>
<script>
    $(document).ready(function() {

        $('#content').load("nav.html");

    });
</script>
</head>

<body>
<div id="content"></div>
    
</body>

</html>

this is my nav.html file

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod tenetur beatae ex assumenda, 
non odit praesentium? Animi commodi, est veritatis quis perferendis at blanditiis? Nesciunt 
inventore aperiam odit sint est maiores quo esse facilis accusamus alias</p>

where am i going wrong?

2
  • 4
    Are errors reported in the console? Can you see in the developer "Network" tab whether the HTTP request is made? Commented Aug 21, 2020 at 12:31
  • 1
    Are you sure the path to nav.html is correct? As Pointy said, are there any issues you can see in dev tools of the browser? Commented Aug 21, 2020 at 12:32

1 Answer 1

1

Assuming you are opening this from the local filesystem and you open the devtools console - you are going to see an error like this

Access to XMLHttpRequest at '<yourfolder>/nav.html' from origin
 'null' has been blocked by CORS policy: Cross origin
 requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https.

This means you are running into a CORS issue - which you can read more about here

To make this work serve it using a simple http server - I would suggest something like serve - https://www.npmjs.com/package/serve

If you are already using an http server, post the console errors.

Best of luck!

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.