Possible Duplicate:
Problems with jQuery getJSON using local files in Chrome
Both my html file "index.html" and "contact.json" are on same folder
My code to fetch json file
function loadData(fileName) {
// getting json from a remote file
// by returning the jqXHR object we can use the .done() function on it
// so the callback gets executed as soon as the request returns successfully
return $.getJSON( fileName + ".json");
}
function fillDataTable(data) {
// alert(data);
// iterate over each entry in the data.info array
$.each(data.info, function(index, element) {
// append it to the table
$("#contact").append('<tr><td>' + element.name + '</td><td>'+ element.email +'</td><td>' + element.phone +'</td><td>' + '<input type="button" id="edit" onclick="edit(this.name)" name="'+ element.name +'" value="Edit"></input>' +'</td></tr>')
});
}
$(document).ready(function(){
// the file's name. "contact" in this example.
var myFile = "contact";
loadData(myFile).done(function(data) {
// check if we acutally get something back and if the data has the info property
if (data && data.info) {
// now fill the data table with our data
fillDataTable(data)
}
});
});
My json file
{
"info": [
{
"name":"Noob Here",
"email":"[email protected]",
"phone":"123456"
},
{
"name":"Newbie There",
"email":"[email protected]",
"phone":"589433"
}
]
}
My html
<div id="container-1">
<ul>
<li><a href="#fragment-1">List</a></li>
</ul>
<div id="fragment-1">
<table id="contact">
<tr>
<th> Name </th>
<th>E-mail </th>
<th> Phone </th>
</tr>
</table>
</div>
</div>
CDN give
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
The code works fine on Firefox
but not working in Google Chrome
.
Error obtained in Google Chrome
XMLHttpRequest cannot load file:///home/user/jquery/contact.json. Origin null is not allowed by Access-Control-Allow-Origin.
Both html and json file are in same location. How to fix it?
Chrome simply doesn't allow ajax calls to be made to local files. Refer This
You can however launch Chrome with the flag --allow-file-access-from-files if you want it to get it working locally.
Check the answer here
try to access json file via http or use jsonp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With