I have a Jquery Ajax script that looks like this..

/* Get Values */
function get_values(id){

    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "example",
        "method": "GET",
        "headers": {
        "Accept": "application/json",
    },

    "dataType"   : "json",
    "mimeType": "multipart/form-data",
    }

    $.ajax(settings).done(function (response) {
        window[data_ ' + id] = response;    
    });

}


get_values(1);
get_values(2);
get_values(3);

$(".content_loader").fadeOut( function() {
    $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>');
});

It is correctly getting the data from the Ajax call and saving it into 3 variables...

• data_1
• data_2
• data_3

Then it fades out a spinner animation and fades in HTML displaying the results.

I am trying to set things up so that the spinner and content is only faded in once it has successfully grabbed the results from the Ajax call.

Is this a job for callbacks or something similar?

I have a Jquery Ajax script that looks like this..

/* Get Values */
function get_values(id){

    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "example.",
        "method": "GET",
        "headers": {
        "Accept": "application/json",
    },

    "dataType"   : "json",
    "mimeType": "multipart/form-data",
    }

    $.ajax(settings).done(function (response) {
        window[data_ ' + id] = response;    
    });

}


get_values(1);
get_values(2);
get_values(3);

$(".content_loader").fadeOut( function() {
    $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>');
});

It is correctly getting the data from the Ajax call and saving it into 3 variables...

• data_1
• data_2
• data_3

Then it fades out a spinner animation and fades in HTML displaying the results.

I am trying to set things up so that the spinner and content is only faded in once it has successfully grabbed the results from the Ajax call.

Is this a job for callbacks or something similar?

• javascript
• jquery
• ajax

• 2 I guess you are looking for success:function() in ajax request? – Ali Sheikhpour Commented May 30, 2018 at 12:02

3 Answers 3

Return the $.ajax promise from get_values() and use $.when() to run when all the requests have pleted

/* Get Values */
function get_values(id) {

  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "example.",
    "method": "GET",
    "headers": {
      "Accept": "application/json",
    },

    "dataType": "json",
    "mimeType": "multipart/form-data",
  }

  return $.ajax(settings)

}


var req1 = get_values(1),
  req2 = get_values(2),
  req3 = get_values(3);


$.when(req1, req2, req3).done(function(data_1, data_2, data_3) {
  $(".content_loader").fadeOut(function() {
    $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 + '</div>');
  });

})

I think, you need to wait for all ajax request is finished. here is war how you can wait for all ajax request to finished.

function get_values(id) {
   var settings = {
        "async": true,
        "crossDomain": true,
        "url": "example.",
        "method": "GET",
        "headers": {
        "Accept": "application/json",
    },

    "dataType"   : "json",
    "mimeType": "multipart/form-data",
    };

    return $.ajax(settings);
};

$.when(get_values(1), get_values(2), get_values(3)).done(function(r1, r2, r3){
        window['data_1'] = r1;
        window['data_2'] = r2;
        window['data_3'] = r3;

        $(".content_loader").fadeOut( function() {
            $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>');
        });
    });

IMHO global variables are no good. You can pass the results after ajax is done

function getValues(id){

var settings = {
    ...
}

$.ajax(settings).done(function (response) {
    $(".results").html(response)   
}).fail(function(console.log(arguments)));