Jquery load content of another page

Question

I trying to load content from another page but there are error shown when i click "get content" button , here the script >>

$(function(){
$('#get_contect').click(function(){
$('#contect').load('page.html #pageContect');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<header>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</header>
<button type="button" id="get_contect">get contect</button>
<body>
<div id = "contect">
</div>
</body>

<footer>
</footer>
</html>

the error that shown is :

jquery-1.10.2.js:8706 XMLHttpRequest cannot load file:///C:/Users/khaled%20salem/Desktop/New%20folder/page.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht — ArmKh, Nov 01 '16 at 08:06
Have you enabled CORS header 'Access-Control-Allow-Origin' enabled on your resource you are requesting ? — mrid, Nov 01 '16 at 08:07
Possible duplicate of [XMLHttpRequest; Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource](http://stackoverflow.com/questions/32578707/xmlhttprequest-cross-origin-requests-are-only-supported-for-protocol-schemes-h) — madalinivascu, Nov 01 '16 at 08:14

score 0 · Answer 1 · answered Nov 01 '16 at 09:54

In order for the page to load, it is needed for the loaded file to be in the same domain, which can be done by hosting your website locally, using one of these apps:

You will not need to enable CORS as the file requested is from the same domain, namely from localhost (or your hosted website when deployed).

After you have configured your host, change the URL of the request to the following:

$('#contect').load('page.html#pageContect');

This means the page is in the same folder as your current page, and the #pageContect element will be shown after it is loaded - you must have no space in between.

If you have page in another folder, you can either use the absolute path of your website directory by entering the trailing slash at beginning (i.e. $('#contect').load('/path/to/file/page.html#pageContect');, either by providing a relative one from the location of your file, using ./ to go up the directory.

Jquery load content of another page

1 Answers1