JQuery .load() is not working. but css applies

Question

I have 1.html as same location as this pi.html

pi.html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(function(){
    $('a').click(function(){
        $('#content').css( "border", "3px solid red" );
        $('#content').load("1.html");
       return false;
    })
});
});
</script>
</head>
<body><a href="1.html">1.html</a>
<div id="content"></div>
</body>
</html>

after a click the link, the css applys, but the .load() is not working. any advice would be appreciated!

are you sure that the file path is correct and the style sheet is included in the HTML page? — wootscootinboogie, Nov 06 '13 at 17:55
there is no style sheet. the css applies because the jquery .css() runs. I did this to test if the jquery works. but the .load() is not work. I can click the link see 1.html if i remove return false; — Peter Huang, Nov 06 '13 at 17:57
You can catch the [`.load()`](http://api.jquery.com/load/) error to see if the page was found. — nkmol, Nov 06 '13 at 18:01

score 2 · Accepted Answer · answered Nov 06 '13 at 17:58

2

If you are testing this on a local machine and not on a web server, it will not work. It's an ajax function that must work on a http:// server. Otherwise, if your files are in the right places, EDIT: your code looks fine.

Check the console for more details CONTROL+SHIFT+J for the console in Google Chrome, when you click the load link.

answered Nov 06 '13 at 17:58

James_1x0

931
10
20

the console shows: OPTIONS file:///C:/Users/Peter/Desktop/myweb/1.html Origin null is not allowed by Access-Control-Allow-Origin. jquery-1.9.1.js:8526 XMLHttpRequest cannot load file:///C:/Users/Peter/Desktop/myweb/1.html. Origin null is not allowed by Access-Control-Allow-Origin. pi.html:1 – Peter Huang Nov 06 '13 at 18:00
1

Which confirms this answer as correct. Stop trying to use Ajax without HTTP. – Quentin Nov 06 '13 at 18:01
@user2788424 Correct. Ajax will not allow a null origin, I think it's something to do with server-side access props like 777,444 (all those access codes). Nevertheless, if its on a server, it will work. – James_1x0 Nov 06 '13 at 18:03

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

If you're running it locally, Chrome\Safari will block .load() requests from the local filesystem.

You can use Firefox, or run Chrome using --allow-file-access-from-files as an option.

Also, running it on a webserver works fine.

EDIT: This answer https://stackoverflow.com/a/13262673/2632329 will help.

edited May 23 '17 at 12:21

Community

1
1

answered Nov 06 '13 at 19:15

cooper667

427
4
7

JQuery .load() is not working. but css applies

2 Answers2