Why i cannot load with jquery an html under the current html file into a div?

Question

I want to load a specific html file and load it into the current page under a specific div. I use the following code:

<script>
$(document).ready(function(){
  $("#link").click(function(){
    $("#myDiv").load("load.html");
  });
});
</script>

and the link tag is like this:

 <li><span class="section"><a id="link" href="javascript:void(0);">Test</a></span></li>

But i am getting these errors:

OPTIONS file:///load.html No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. jquery.js:8706
send jquery.js:8706
x.extend.ajax jquery.js:8136
x.fn.load jquery.js:7745
(anonymous function) ec.html:71
x.event.dispatch jquery.js:5095
v.handle

XMLHttpRequest cannot load file:///load.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

is your source file on a different domain thanthe file to be loaded? — gaurav5430, Dec 24 '13 at 21:03
@gaurav5430 No.It's a simple html file under the same folder — curious, Dec 24 '13 at 21:05

score 1 · Answer 1 · edited May 23 '17 at 11:50

try to add this header to your server config file

 <name="Access-Control-Allow-Origin" value="*" />

EDIT:

if you're not using a local web server

Due to security issues (same origin policy), javascript is not allowed to access local files. Imagine a situation when javascript from a website tries to steal your files. You have to deploy it to a web server.

also see : Local file access with javascript

EDIT: you may also wanna try

jQuery.ajax({ 
     url: "test.html", dataType: "html" 
}).done(function( responseHtml ) {
     $("#mydiv").html(responseHtml);
});

Note: `

Because of same-origin policy, some browsers won't permit AJAX requests to file:/// URLs, even if the original file was loaded that way.

`

Why i cannot load with jquery an html under the current html file into a div?

1 Answers1