trouble reading json data using jquery

Question

I'm sure this is a silly oversight but I can't figure out how to get jQuery's 'getJSON' function to work. For test purposes, I have a directory set up as follows:

test.html
js/
  jquery-1.6.2.min.js
  test.js
ajax/
  test.json

and in the <head> of test.html I have the lines

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>

As a first test of the getJSON function, test.js reads as follows:

$(document).ready(function() {
    $.getJSON('ajax/test.json', function(data) {
        alert('Success!');
    });
}

However, nothing happens when the 'test.html' is loaded. I have a feeling the 'ajax/test.json' path specification is the problem, but I'm not sure why.

EDIT: My bad on the curly brace, that was actually fine in the code I just mis-copy-pasted. I opened Chrome Developer Tools and now see an XMLHttpRequest error with the explanation: "Origin null is not allowed by Access-Control-Allow-Origin".

EDIT 2: Well that's annoying.. looks like it's a Chrome issue. Works fine on Safari. As a workaround you can fire up python -m SimpleHTTPServer in the base directory and access the page at localhost:8000/test.html, in which case Chrome works fine.

Open up Firebug or Chrome Developer Tools or whatever equivalent you have for your browser. Look at the Net tab to see if you are getting 404s. Look at the console to see if you have JS errors. — Quentin, Aug 04 '11 at 06:51
thanks.. i just did and it looks like there's an XMLHttpRequest error with the explanation: "Origin null is not allowed by Access-Control-Allow-Origin". what does this mean? — macaroon5, Aug 04 '11 at 08:20

score 3 · Answer 1 · answered Aug 04 '11 at 06:55

3

You need to close your brackets correctly on the getJSON callback function and the ready function:

$(document).ready(function() {
    $.getJSON('ajax/test.json', function(data) {
        alert('Success!');
    });
});

answered Aug 04 '11 at 06:55

James Allardice

164,175
21
332
312

Ahh, yes. You are right. I somehow didn't think about the fact that the JS might just be included in the HTML file at the root directory... editing now. – James Allardice Aug 04 '11 at 06:58
my b that was a typo in the original question.. i've updated now – macaroon5 Aug 04 '11 at 08:19

score 1 · Answer 2 · answered Aug 04 '11 at 06:58

1

your code:

$.getJSON('ajax/test.json', function(data) {
   alert('Success!');
); // you missed a curly brace here. that may be a problem

CORRECT CODE:

$.getJSON('ajax/test.json', function(data) {
        alert('Success!');
});

answered Aug 04 '11 at 06:58

thecodeparadox

86,271
21
138
164

my b that was a typo in the question – macaroon5 Aug 04 '11 at 08:15

score 0 · Accepted Answer · answered Aug 04 '11 at 08:23

0

It sounds like you are trying to run this directly from a file system. Make the pages available over HTTP (by installing a web server) and use that instead.

Local webpages have lots of different security rules to HTTP webpages.

answered Aug 04 '11 at 08:23

Quentin

914,110
126
1,211
1,335

trouble reading json data using jquery

3 Answers3