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
– Quentin, Commented Aug 4, 2011 at 6: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
– macaroon5, Commented Aug 4, 2011 at 8:20

James Allardice · Accepted Answer · 2011-08-04 06:55:00Z

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 4, 2011 at 6:55

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Allardice Over a year ago

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.

macaroon5 Over a year ago

my b that was a typo in the original question.. i've updated now

thecodeparadox · Accepted Answer · 2011-08-04 06:58:46Z

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 4, 2011 at 6:58

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

macaroon5 Over a year ago

my b that was a typo in the question

Quentin · Accepted Answer · 2011-08-04 08:23:11Z

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 4, 2011 at 8:23

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

trouble reading json data using jquery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related