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" ".dtd">
<html xmlns="">
<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>
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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>
- 9 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 Commented Oct 31, 2013 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 Commented Oct 31, 2013 at 12:38
-
3
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 fromlocalhostinstead – Nick R Commented Oct 31, 2013 at 12:39
4 Answers
Reset to default 3I 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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?
I had an parable 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.
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.