CODEWITHSUNDEEP
javascriptajaxmootools
Julian H. Lam
Julian H. Lam

Reputation: 26134

Returning value in function only when ajax call has completed?

So I am using mootools, and I have a function that calls an ajax script to get a value. This value is then returned in the function. However, for some reason, the function returns too quickly for the AJAX call!

What am I doing wrong...

function getCredits() {
    var loadGlobalTab = new Request.JSON({
        url: {my api, url removed for security},
        evalScripts : true,
        async: false,    // I tried this, hoping it would stop the function from returning too soon, but no dice.
        onSuccess: function(returnInfo) {
            alert(returnInfo.data.total);
            return returnInfo.data.total;
        }
    }).send(sendData);    // Where sendData has been defined prior
}

The alert returns the proper value, so I know the AJAX call works, however, the function itself returns nothing, meaning that while the AJAX call is being made, the function ends right away.

I tried putting a return 100 at the end, just for kicks, and the function returned 100.

Upvotes: 0

Views: 2595

Answers (3)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

edit oh dear. beaten due to a phone call. nevermind!

ajax is asynchronous and using async: false is just the wrong way to go about it. instead, have a second callback function run with the result of the query called from the onComplete/onSuccess directly.

IF you really have to do it so it blocks, then this works fine:

var blockingCheck = function() {
    var obj = {};
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode({
                text: 'some text',
                array: [1, 2, 'three'],
                object: {
                    par1: 'another text',
                    par2: [3, 2, 'one'],
                    par3: {}
                }
            }),
            delay: 3
        },
        async: false,
        onSuccess: function(response) {
            obj = response;
        }
    }).send();

    return obj;
};

console.log(blockingCheck());

http://jsfiddle.net/dimitar/eG4t2/

Upvotes: 4

Naftali
Naftali

Reputation: 146340

ajax is asynchronous

Meaning that JS will read right through it and if there is no return right then, then there is nothing.

The good thing to do is a callback instead of a return:

function getCredits() {
    var loadGlobalTab = new Request.JSON({
        url: {my api, url removed for security},
        evalScripts : true,
        headers: {'ACCEPT': 'json','X_REQUESTED_WITH':'jsonhttprequest'},
        onSuccess: function(returnInfo) {
            alert(returnInfo.data.total);
            //goto callback
            getCredits_Callback(returnInfo.data.total);
        }
    }).send(sendData);    // Where sendData has been defined prior
}

function getCredits_Callback(total){
   //do something with total
}

2nd approach:

function getCredits() {
    var loadGlobalTab = new Request.JSON({
        url: {my api, url removed for security},
        evalScripts : true,
        headers: {'ACCEPT': 'json','X_REQUESTED_WITH':'jsonhttprequest'},
        onSuccess: getCredits_Callback
    }).send(sendData);    // Where sendData has been defined prior
}

function getCredits_Callback(returnInfo){
   //do something with returnInfo
}

Upvotes: 2

jlindenbaum
jlindenbaum

Reputation: 1881

It's returning nothing, because your return statement is returning into an attribute of an object, not the variable you think it's returning to. You're better off passing off the function of your "onSuccess" to a separate handler function. That way you can deal with the return values outside of a closure.

Upvotes: 1

Related Questions