jQuery Ajax Post - Unable to set global variable using callback function?

Question

I have the following ajax method. On success I want to set a global variable but it doesn't seem to work - console returns empty object. It only works if I define async to false. However I'd like to keep the ajax method asynchronous. How can I get this to work?

var appointment = {};

if ($("#Appointment").is(":checked")) {
     $.ajax({
            type: "POST",
            url: "someurl",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                dateStart: moment()
            }),
           // async: false,
            dataType: "json",
            success: function(data) {
                ajaxCallBack(data);
            }
    });

    function ajaxCallBack(data) {
            var response = $.parseJSON(data.d);
            appointment = { startDate: response.startDate, endDate: response.endDate };
    }
}

console.log(appointment);

Possible duplicate of [JavaScript: Global variables after Ajax requests](http://stackoverflow.com/questions/3222347/javascript-global-variables-after-ajax-requests) — Ted, Oct 24 '16 at 18:52
http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Ted, Oct 24 '16 at 18:53
@Ted for your information it's not lazy at all. I've been scratching my head and googling for hours. If you can't be bothered to post any useful answers as some of the others have done then refrain from marking every question as potential duplicates. If any thing your the one who is lazy if you can't be bothered to submit a solution with some explanation. — adam78, Oct 24 '16 at 20:04
@Ted Clearly you fail to spend adequate time reading peoples comments the same way as you are lazy to submit any useful answers. I repeat again - I've already come across the posts that you mention prior to submitting my own question. Maybe you fail to realize that it's not always glaringly clear to relate one answer to every question - hence why people use stackoverflow for some additional help and direction, not to be belittled by individuals like yourself. — adam78, Oct 25 '16 at 08:27

jonzee · Answer 1 · 2016-10-24T18:56:14.157

console.log() is triggered before ajaxCallback() and before appointment is set (ajax is asynchronous), to show appointment in console you can run:

function ajaxCallBack(data) {
        var response = $.parseJSON(data.d);
        appointment = { startDate: response.startDate, endDate: response.endDate };
        console.log(appointment);
}

or

function ajaxCallBack(data) {
        var response = $.parseJSON(data.d);
        appointment = { startDate: response.startDate, endDate: response.endDate };
        printAppointment();
}

// define as global:
function printAppointment() {
    console.log(appointment)
}

score 1 · Answer 2 · answered Oct 24 '16 at 18:46

1

Ajax happens asynchronously, meaning code that appears after it won't wait for it to complete. So your console.log is executing before the ajax has necessarily gotten what it needs to populate the object.

Try moving your console.log statement inside of the callback - put it right after the line where you set appointment.

answered Oct 24 '16 at 18:46

jack

2,894
1
13
23

@Lucas Costa - you're right guys. I keep seeing this question over and over again and my eyes played a trick on me :) – Ted Oct 24 '16 at 18:49

score 0 · Accepted Answer · answered Oct 24 '16 at 18:50

ajax is an asynchronous operation. So console.log will execute even before ajax success. console the variable from ajaxCallBack function

function ajaxCallBack(data) {
  var response = $.parseJSON(data.d);
  appointment = { startDate: response.startDate,
                  endDate: response.endDate };
  console.log(appointment);
}

jQuery Ajax Post - Unable to set global variable using callback function?

3 Answers3