CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
zBaoAnhLe
zBaoAnhLe

Reputation: 253

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

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>

Upvotes: 2

Views: 6383

Answers (4)

Dave B
Dave B

Reputation: 69

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.

Upvotes: 0

Kirsten
Kirsten

Reputation: 490

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.

Upvotes: 0

zBaoAnhLe
zBaoAnhLe

Reputation: 253

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

Upvotes: 3

Lemex
Lemex

Reputation: 3794

<!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?

Upvotes: 0

Related Questions