javascripthtmljqueryloadjquery-load

why Jquery load is not working in firefox?


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?


Solution

  • 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!