Basically, I am trying to fetch remote content when people click the link.
It works in Coda HTML preview window, but when I test the html in real browser (Chrome / FF / Safari), it won’t work, the remote content won’t be fetched. ( I am sure jquery is working, as alert(‘url is ‘ + url); pops up when I click link)
It is wired. What is wrong?
My code as below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<link type="text/css" href="http://localhost/jquery-ui-1.8.20.custom/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#links a').click(function(e) {
var url = $(this).attr('href');
alert('url is ' + url);
$('#content').load(url);
e.preventDefault();
});
}); // document ready
</script>
</head>
<body>
<ul id="links">
<li><a href="http://google.com">Google</a></li>
<li><a href="http://yahoo.com">Yahoo</a></li>
</ul>
<div id="content"></div>
</body>
</html>
Thanks for any help.
This is because of the Same Origin Policy. It is a security feature of most browsers. The most common workaround is to use JSONP, but as you are expecting HTML as a response, this will not work for you.
What you will need to use is a server-side proxy, whereby you make your request in PHP/ASP.Net/other server side tech to get the HTML of the URL, then expose this to your jQuery via a local request.