Reputation: 263
I have the simple JS code for updating text on button:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table border='1'>
<div id="load-button" style="border:1px solid black; background-color:white;padding:5px;cursor:pointer;width:200px;text-align:center;border-radius:4px;">Load button</div>
<script type="text/javascript">
//wait for HTML document
$(document).ready(function() {
$('#load-button').click(function() {
$.ajax({
url: 'http://developers-blog.org/resources/jquery-ajax/snippet.html',
success: function(data) {
$('#load-button').empty();
$('#load-button').append(data);
}
});
});
});
</script>
</body>
</html>
JQuery library is the folder with index.php page. But this code doesn't work. Please, tell me, where have I made a mistake? Thank you in advance.
Upvotes: 0
Views: 69
Reputation: 3009
It is indeed a case where the Same Domain Policy is applied.
In case you have access to the files on the server that you want to call, you can set a header (Access-Control-Allow-Origin
) on the application to allow the request from determined domains.
PHP example:
header('Access-Control-Allow-Origin: *');
or
header('Access-Control-Allow-Origin: http://permitted_domain.com');
Upvotes: 0
Reputation: 15579
looks like you are making a cross domain request and most browsers by default enforce a SAME ORIGIN POLICY and block requests to other domains.. You can use jsonp or use your server to contact the paritcular end point.. read more about JSONP here: http://en.wikipedia.org/wiki/JSONP
Upvotes: 1