Jquery .load() function isn't working on Chrome?

Question

I tried to used the .load() function of Jquery. It seem to me that its not working on my Chrome but its working on Firefox and Safari...

I'm not sure what I did wrong? Please help me....

Here's my code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/goldstyle.css" type="text/css" media="all"/>

</head>
<body>
    <div id="navcontainer">
        <script type="text/javascript">
            $(document).ready(function() {
                $('#navcontainer').load('nav-menu.html');
            });
        </script>
    </div>
</body>

Why are you including jQuery twice. Check out the developer console in Chrome, does it actually make the request for 'nav-menu.html` ? — Nick R, Oct 31 '13 at 12:35
^^ This, and also there's no reason to put the script inside the element in question. Just put the script block in the head, after the script includes. — Reinstate Monica Cellio, Oct 31 '13 at 12:38
Also, if you're directly opening the file in the browser, i.e `file:///` then it won't work in Chrome, and you'll see something like: `Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin.`. You need to setup a web-server, like WAMP, and then run it from `localhost` instead — Nick R, Oct 31 '13 at 12:39

score 3 · Accepted Answer · edited Sep 23 '14 at 09:55

3

I found out that if you're directly opening the file in the browser, i.e file:/// it will not work in Chrome, and you'll see something like:

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin

You need to setup a web-server, like WAMP, and then run it from localhost instead

edited Sep 23 '14 at 09:55

GNi33

4,459
2
31
44

answered Nov 16 '13 at 05:44

zBaoAnhLe

253
1
6
19

score 0 · Answer 2 · answered Oct 31 '13 at 12:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/goldstyle.css" type="text/css" media="all"/>
    <script type="text/javascript">
            $(document).ready(function() {
                $('#navcontainer').load('nav-menu.html');
            });
    </script>
</head>
<body>
    <div id="navcontainer">

    </div>
</body>

I updated your code so the load is in the correct place as its bad practice to have it where it was.

Your also shouldnt have jQuery normal and min this will cause some issues to!

It works fine here on Chrome,IE and Firefox.

Have you tried pushing F12 for developer tools?

Then seeing what errors are displayed in the console?

tried your code and got this error. OPTIONS file://localhost/Users/zBaoAnhLe/Dropbox/My%20Project/NetBean%20Application/Fiverr%20Clients/bmelloh.easynfast.net%20Jquery/public_html/nav-menu.html Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:6 XMLHttpRequest cannot load file://localhost/Users/zBaoAnhLe/Dropbox/My%20Project/NetBean%20Application/Fiverr%20Clients/bmelloh.easynfast.net%20Jquery/public_html/nav-menu.html. Origin null is not allowed by Access-Control-Allow-Origin. — zBaoAnhLe, Oct 31 '13 at 16:35

score 0 · Answer 3 · edited Jul 09 '15 at 14:37

0

I had an comparable problem and found out, that Chrome (in opposite to IE or FF) often needs an additional Ctrl+F5 to unload the cached content.

For me it seemed that my $().ready function doesn't work, but after Ctrl+F5 it does work.

I know it is not exactly an answer to the question, but I came here with this described behaviour - and perhaps others do.

edited Jul 09 '15 at 14:37

rink.attendant.6

44,500
61
101
156

answered Jul 09 '15 at 14:04

Kirsten

492
4
11

Thanks, this helped me. – codacopia May 24 '18 at 13:52

score 0 · Answer 4 · answered May 03 '19 at 06:58

I met the similar problem and I fix that with adding setTimeout() instead of only function() there, it works.

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(setTimeout(function(){ 
$("#list").load("list.htm", function(){$("#list").hide().slideDown(600);})
},300)); 
</script>
<script language="javascript">

My former code not working in Chrome browser but Firefox.

$(document).ready(function(){ 
    $("#list").load("list.htm", function(){$("#list").hide().slideDown(600);})
    });

Hope this could help you.

Jquery .load() function isn't working on Chrome?

4 Answers4

Linked