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":"myemail@server.com",
"phone":"123456"
},
{
"name":"Newbie There",
"email":"hisemail@server.com",
"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?
