jquery ajax return: undefined

Question

I'm sure you know this problem, I'm still trying to solve it for few days. I've tried lots of stuff but no one worked:

Here is the code

function lobbyLeader() {
    $.ajax({
       data: {"id": 1, "request": "lobbyinfo", "method": "read"},
       url: 'api.php',
       dataType: 'json',
       success: function(data){
           result = data.leader;
           return result;
       }
   });
}

alert(result); will show 1 but when using in an other function it says undefined.

Are you doing `alert ( lobbyLeader() );` and getting back `undefined`? — Jan Hančič, Jan 02 '11 at 20:13
"Are you doing alert ( lobbyLeader() ); and getting back undefined?" Yes — Nightbox, Jan 02 '11 at 20:15
"What do you mean by "when using in other function"?" Like this: if (lobbyLeader() == 1) { — Nightbox, Jan 02 '11 at 20:15
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Bergi, May 22 '13 at 01:34

score 17 · Accepted Answer · answered Jan 02 '11 at 20:15

17

You can't return from an asynchronous function like this, you're returning from that success callback function, not the parent function. Instead, kick off whatever you need in the callback, like this:

function lobbyLeader() {
  $.ajax({
    data: {"id": 1, "request": "lobbyinfo", "method": "read"},
    url: 'api.php',
    dataType: 'json',
    success: function(data){
      someOtherFunc(data.leader);
   }
 });
}

answered Jan 02 '11 at 20:15

Nick Craver

623,446
136
1,297
1,155

I've merged both functions: http://pastebin.com/runiGzsd can you tell me how to really fix it ? – Nightbox Jan 02 '11 at 20:21
@Nightbox - Instead of `if (function(data.leader) {` you need `if (data.leader) {` – Nick Craver Jan 02 '11 at 20:23
@Nightbox - Is this what you're after? http://www.jsfiddle.net/nick_craver/qLaLJ/ – Nick Craver Jan 02 '11 at 20:32
hmm there are 2 different ajax calls, should i combine them in PHP into a single and get that data ? – Nightbox Jan 02 '11 at 20:37
@Nightbox - yup, that's what I'd do, just have 2 properties on the JSON returned, much simpler :) – Nick Craver Jan 02 '11 at 20:37
yep, defently was better much ty – Nightbox Jan 02 '11 at 20:47
Is there a solution that doesn't involve having to make separate function? Because creating another function means that you can't have a multi-purpose function for ajax requests – avisk May 19 '21 at 22:19

score 8 · Answer 2 · answered Mar 31 '16 at 20:08

8

Correctly stated that you can't really return from the Success, however, if you are doing what I think you are doing, and that is to grab the data and return it and assign it to something in another area IE

var obj = lobbyLeader();

Then you can just set the function to async:false and return the obj outside of the Success after the code has finished running. example

function lobbyLeader() {
var obj;
  $.ajax({
    async:false;
    data: {"id": 1, "request": "lobbyinfo", "method": "read"},
    url: 'api.php',
    dataType: 'json',
    success: function(data){
      obj= JSON.parse(data);
   }
 });
    return obj;
}

This way the script stops to wait for success and then sets and returns.

answered Mar 31 '16 at 20:08

matt

91
1
1

"As of jQuery 1.8 [three years ago!] the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success()." http://api.jquery.com/jQuery.ajax/ Promises aren't that hard to learn, it's worth the effort. Certainly an improvement on just blocking your whole UI until the request completes. – Daniel Beck Mar 31 '16 at 20:47
I faced the very same problem. You saved my day @matt. Also I did not set the function to `async:false` and got the correct output. – nightrain Mar 12 '20 at 22:34

score 5 · Answer 3 · answered Jan 02 '11 at 20:14

The problem here is that AJAX is asynchronous (it's what the first A stands for). This means that the function returns immediately; the success handler is only called when the request is successful. This means that lobbyLeader returns immediately after you have made your request, so returns nothing.

If you have any code that needs to run after you have received the data, it must be placed in the success handler (or another AJAX event handler) or be invoked by it.

score 3 · Answer 4 · answered Mar 20 '14 at 08:45

I recommend this way.

use the ajax call by the async:false.
move the return statement after the ajax call.

Example :

function makeJQGridDataFromList(url)
{
    var rowData;
    var viewPage = 0;
    var viewTotal = 0;
    var viewRecords = 0;

    var resultObject;

    $.ajax({    
        type:"GET",
        url:url,    
        async: false,
        success:function(args){ 
            if(args.result==true)
            {
                try
                {
                    viewPage = args.cond.pageIndex;
                    viewTotal = args.cond.recordCountPerPage;
                    viewRecords = args.cond.totalCnt;

                    rowData = jsonMakeRowsForGrid(args.data);
                }
                catch (e)
                {
                    console.debug("Error!");
                    alert("Invalid data");
                    return;
                }
            } else
            {
                alert("API return ERROR!");
                return;
            }
        }, 
        error:function(e){
            alert("Fail AJAX communication");
            return;
        }
    });

    resultObject = {
        page : viewPage,
        total : viewTotal,
        records : viewRecords,
        rows : rowData
    };

    return(resultObject);
}

You can test the following method.

(In the other file (html or js))

var gridData = makeJQGridDataFromList(openAPIUrl);
console.debug(">> " + JSON.stringify(gridData));

You can see the gridData.

I faced same problems. :)

score 1 · Answer 5 · answered Jan 02 '11 at 20:15

When you return values from within an anonymous function that is executed asynchronously, those values will not propogate up the scope chain, the return statement is only applied on the current function scope, not the surrounding scope, $.ajax() is asynchronous, so immediately after executing the statement, the outer function returns, so there is no return value of the outer function, that's why you're getting undefined.

The only way to hook into a possible return value from the callback function passed to $.ajax is to invoke another outer function, passing in the desired data.

jquery ajax return: undefined

5 Answers5

Linked

Related