Search code examples
jquerycross-browsergetjson

Simplest of getJSON call not working

Can't seem to figure out what's wrong with the simple getJSON call below. It's working fine in FF12 but not in IE8 and Chrome19.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">    </script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('data.json',function(result){
    alert("success");
});
});
</script>

Please note that the following is working fine in all the browsers:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">       </script>
<script type="text/javascript">
$(document).ready(function(){
       alert("success");
});
</script>

So, apparently, something's wrong with the getJSON call.

Any ideas?

Thanks.

Update: Thanks to samy.vilar I was able to get it working. Here are the things I corrected :-

  1. Hosted the file to a server(IIS 7, in this case): To make an AJAX request the files got to be hosted on a server. I was trying to access data.json using the file system.

  2. Added the MIME type for extension .json in IIS 7.

That did it. Though I still wonder how it was working in FF earlier when we can't complete an AJAX request without hosting.

Solution

  • Since IIS doesn't support json by default you can try renaming the data.json to data.html this way IIS won't complain ;) ... just update getJSON to $.getJSON('data.html,...

    if you want to enable .json file extension simply follow this instructions. Open the properties for the server in IIS Manager and click MIME Types
    Click "New". Enter "JSON" for the extension and "application/json" for the MIME type.