0

There should be some logical explanation for the question but I cant find anything. I'm using OOP in my javascrtipt app and I'm trying to set variable value as function.

For first the value init_s.__temp_var is equal to empty object. After I call function logic_s.get_active_statuses(..) it should be overwritten. But it doesn't. Action:

var widget = {
    settings: {
        __temp_var: {}
    },

    init: function () {
        init_s = this.settings;
        logic_s = this.functions_available;
    },

    functions_available: {
        get_active_statuses: function (id) {
            jQuery.ajax({
            url: .....,
            type: 'POST',
            dataType: 'JSON',
            data: {
                ....
            },
            success: function (data) {
                init_s.__temp_var = data; // not working
                return data; // undefined
            },
            error: function (e) {
                console.log(e.message);
            }
        });
        }
    },

    my_actions: {
        logic: function () {
            var active_services_status = logic_s.get_active_statuses(5);
            console.log(init_s.__temp_var); // should print {id : 5}
            console.log(active_services_status ); // if used with return prints "undefined"
        }
    }
};

so when I call logic_s.get_active_statuses(5); for the first time, it loggs me empty object, but when I call it for the second time, it loggs me {id : 5}. If third time variable would be 10 it would be printed just after 4th call. Why is this happening? It seems like the variable is being set after it is printed..

EDIT:

the way it is working and returning "undefined":

function get_active_status (id) {
                jQuery.ajax({
                url: .....,
                type: 'POST',
                dataType: 'JSON',
                data: {
                    ....
                },
                success: function (data) {
                    return data; // undefined
                },
                error: function (e) {
                    console.log(e.message);
                }
            });
            };

get_active_status(5); // returns "undefined" instead of object that was sended
Arnas Pečelis
  • 1,000
  • 2
  • 12
  • 32

1 Answers1

1

When you use AJAX, your requests are asynchronous. That means it sends some request here

logic_s.get_active_statuses(5)

and it doesn't wait for the response (success executes only after you've received response from server) and continues to execute

console.log(init_s.__temp_var); // should print {id : 5}
console.log(active_services_status ); // if used with return prints "undefined"

What you can do is to use setTimeout(), however this destroys any feature of asynchronous behaviour. Another way - look for the option async which is true by default. Your function will be:

function get_active_status (id) {
            jQuery.ajax({
            url: .....,
            type: 'POST',
            dataType: 'JSON',
            async: false,
            data: {
                ....
            },
            success: function (data) {
                return data; // undefined
            },
            error: function (e) {
                console.log(e.message);
            }
        });
        };
Alexander B.
  • 626
  • 6
  • 21