Waiting for AJAX call before code runs using jQuery

Question

I'm pulling in some JSON and I need that information before the rest of my code runs. I'm very new to jQuery so have been looking at $.when() and setting the AJAX async to be false (which is probably not the best option). I'm also having a problem where my variables are undefined outside of my AJAX call. Here is my code - any help/suggestions would be really appreciated.

//Display nothing while AJAX Call is being made (will add a loading spinner in here)

$('body').css('display','none');

//Ajax call to load images

var test = $.ajax({
  dataType: "json",
  url: "../quiz/scripts/test.json",
  success: function() {
    console.log("Loaded in AJAX");
  var results = test.responseJSON.Items.Pics;
  console.log(results);
  $('body').css('display','block');
}
});

// Trying to retrieve my results variable

console.log("Loaded Outside of AJAX");
console.log(results);

Console is giving me this:

    Loaded Outside of AJAX [VM] quiz.js (23396):18

    Uncaught ReferenceError: results is not defined [VM] quiz.js (23396):19

    XHR finished loading: "http://localhost:8888/.....etc"

    Loaded in AJAX [VM] quiz.js (23396):9

    [Object, Object, Object, Object, Object]

How can I get the text "Loaded in AJAX" to appear before "Loaded Outside of AJAX" and how can I use the variable "results" outside of the AJAX call?

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Barmar, Nov 11 '13 at 02:51
change `success: function() {` to `success: function(response) { console.log(response);` — gloomy.penguin, Nov 11 '13 at 02:55

napo · Accepted Answer · 2013-11-11T03:16:02.640

1

Try this:

$.getJSON("../quiz/scripts/test.json", null, function(data) { 
    //If you want to, you can call the data here.
}).done(function(data) {
  console.log("The AJAX call is finished! Whoop dee doo!");
  console.log(data);
});

If you want to, you can fid some good reference on how a JSON request gets formed in here. I've learned a good bit directly from the API documentation.

edited Nov 11 '13 at 03:16

answered Nov 11 '13 at 02:58

napo

859
8
18

1

i think they need to know that `data` is their response, too.. (just saying, based on the code up there) – gloomy.penguin Nov 11 '13 at 02:58
On that note, they might be able to use a `.done(function() { ... });` chaining at the end of the `$.getJSON` call. – napo Nov 11 '13 at 03:05
can you update your answer and include some details and reasons and ways and stuff...? showing an example of how to use `.done` or `.error` might be useful to OP. AJAX is harder for most people because it is asynchronous and they don't know how/when to use the response. I'm not going to post an answer b/c you covered the basic idea.... but you could/should include some more details or I bet OP will come ask another question in 20 min about this. – gloomy.penguin Nov 11 '13 at 03:09
to add to what @gloomy.penguin is saying...whatever the argument is named in handler is variable name used to parse data into page – charlietfl Nov 11 '13 at 03:10

Waiting for AJAX call before code runs using jQuery

1 Answers1

Linked