-2

I am trying to load an external html file using JQuery. But, the following code does not work:

<!-- JQuery Code-->
                 <script>
                    $(document).ready(function(){
     
        
        $("#div1").load("header.html");
      
    });
                  </script>
            </head>
         <body>
          
             <div id="div1"></div>
    
          </body>
Indu Bhusan Nath
  • 109
  • 5
  • Assuming you've referenced jQuery.js in your page, and the path to `header.html` is correct, then what you have should function correctly. As such we need more information than simply 'it doesn't work'. Open devtools and inspect the network tab to see what the result of your AJAX request is and debug from there. – Rory McCrossan Aug 20 '22 at 15:16
  • header,html is in the same folder – Indu Bhusan Nath Aug 20 '22 at 15:31
  • Ok, and what about the output from devtools? – Rory McCrossan Aug 20 '22 at 15:32
  • Access to XMLHttpRequest at 'file:///C:/Users/ibnat/MyProjects/Xeo/header.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. – Indu Bhusan Nath Aug 20 '22 at 15:55
  • 1
    That's your problem - you can't make AJAX requests to the local file system - it would be a massive security flaw if that was possible. You need to run your code on a webserver. – Rory McCrossan Aug 20 '22 at 16:13
  • See this question for more information: https://stackoverflow.com/q/10752055/519413 – Rory McCrossan Aug 20 '22 at 16:14
  • @RoryMcCrossan Thanks....the issue was with the local server....your solution has worked...thanks – Indu Bhusan Nath Aug 20 '22 at 16:25
  • Glad you got it solved. I'd suggest deleting this question in that case, as what you asked had nothing to do with the problem – Rory McCrossan Aug 21 '22 at 18:10

1 Answers1

-1

the following code with debug !! to see what is your problem

$( document ).ready(function() {
    console.log( "ready!" );
    $("#div1").load( "header.html", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});

});
Jehad Ahmad Jaghoub
  • 1,225
  • 14
  • 22