Jquery post success variable scope

Question

Hi,

I'm trying to return the ajax success array from one function to another. For some reason I don't seem to be able to pass the data stored in a variable in the success part of the ajax function into the parent function to return.

I looked at this post to try and figure things out, but not such luck: http://stackoverflow.com/questions/709876/jquery-ajax-call-set-variable-value-on-success

Thanks so much for any assistance.

Here's a simplified version of the code:

// make json_to_return global
var json_to_return;

function loop_through_data(){

  // call the load_days function and put its array data into days_array
  var days_data = load_days(03,2010);

  // I'd like to be able to iterate through days_data here
  //
  //
}

function load_days(selectedMonth, selectedYear){  
                  $.ajax({
                   type: "POST",
                   dataType: "json",
                   url: "../includes/get_availability.php",
                   data: "month=" + selectedMonth + "&year=" + selectedYear,
                   success: function(available_json){
                       json_to_return = available_json;
                   },
                   error: function(msg){
                    alert("error " + msg);
                   }
                 });
               return json_to_return;

}   

Answer 1

This part of your function happens later:

success: function(available_json){
                   json_to_return = available_json;
               }

So the variable you're returning is undefined, because the code to set it doesn't happen until the response comes back from the server. Either call the rest of the code to run from your success function, so it'll run when the data's ready, or set async:false (less desirable because it locks the browser).

The async: false method is like this:

              $.ajax({
               type: "POST",
               async: false,
               dataType: "json",
               url: "../includes/get_availability.php",
               data: "month=" + selectedMonth + "&year=" + selectedYear,
               success: function(available_json){
                   json_to_return = available_json;
               },
               error: function(msg){
                alert("error " + msg);
               }
             });

The better approach:

              $.ajax({
               type: "POST",
               dataType: "json",
               url: "../includes/get_availability.php",
               data: "month=" + selectedMonth + "&year=" + selectedYear,
               success: function(available_json){
                   loopThroughTheDaysAndDoStuff(available_json);
               },
               error: function(msg){
                alert("error " + msg);
               }
             });

Answer 2

$.ajax is an asynchronous function.

It means that when called, the function keeps executing.

In your code provided var days_data = load_days(03,2010); this happens:

• Start an ajax call (asynchronous, function keeps executing)
• return json_to_return (undefined)
• days_data == undefined
• ajax call finishes, json_to_return gets assigned (this can happen in any timespan)

You should rethink your logic, and start coding around the asynchronousity of the ajax call.

A first approach might be passing a function (callback) to load_days which should be called AFTER the success of the ajax call.