return from jquery ajax call

Question

I'm trying to use the return from a jQuery ajax call in my own function, but it keeps returning undefined.

function checkUser2(asdf) {
    $.ajax({
        type: "POST",
        async: false,
        url: "check_user.php",
        data: { name: asdf },
        success: function(data){ 
            return data;
            //alert(data);
        }
    });  
}

$("#check").click(function(){
    alert(checkUser2("muma"));
});

the ajax call definitely works, because when I uncomment my alert I get the correct return, and I can see it in firebug. Am I doing something stupid?

score 7 · Accepted Answer · answered May 16 '10 at 18:03

The AJAX call is asynchronous - this means that the AJAX request is made out-of-order of usual program execution, and in your program that means that checkUser2() is not returning data to the alert.

You cannot use return values from $.ajax() calls in this way, instead move the code that utilises the AJAX return data to the success() function - that what it's for.

score 3 · Answer 2 · answered May 16 '10 at 18:10

You could do this, I think:

function checkUser2(asdf) {
  var s = $.ajax({
        type: "POST",
        async: false,
        url: "check_user.php",
        data: { name: asdf },
        success: function(data){ 
            return data;
            //alert(data);
        }
    }).responseText;  
   return s;
}

but, as in the 4th example of the jquery doc page for ajax function says, I think that

Blocks the browser while the requests is active. It is better to block user interaction > by other means when synchronization is necessary.

This fixes the problem I had in almost the exact same scenario, as the "async: false" was the key part to stop the call being made asyncronously. — Brett Rigby, Aug 23 '11 at 11:15

score 1 · Answer 3 · answered May 16 '10 at 18:10

1

Try this instead:

 function checkUser2(asdf) {
    var result;
    $.ajax({
        type: "POST",
        async: false,
        url: "check_user.php",
        data: { name: asdf },
        success: function(data){ 
            result = data;            
        }
    });
    return result;  
}       


$("#check").click(function(){
    alert(checkUser2("muma"));
});

You may have to move the result variable out as a global javascript variable instead. I haven't tested this yet.

answered May 16 '10 at 18:10

Falle1234

5,013
1
22
29

1

Synchronous ajax is a really bad idea however. – Pointy Feb 24 '12 at 12:27
I agree, but it was a way around the problem the OP had. And he was already using the ajax function in an asynchronous way. – Falle1234 Feb 24 '12 at 12:59
This way didn't work for me either. $("#submitPO").click(function(){ alert(updatePO("444")); }); failed to pop an alert. My function is structured in the same way as yours. – Mike S. Apr 12 '12 at 22:25

score 0 · Answer 4 · answered May 16 '10 at 19:03

0

You could also store the "data" using jQuery's data method and associate it with a global jQuery object or local jQuery selector. For e.g.

success: function(data) {
  $.data('result', data);
}

The return value can the be accessed anywhere using

$.data('result')

You could also associate this to a local variable (for e.g. $('#myid').data()) so that its local to that object rather than in the global scope.

answered May 16 '10 at 19:03

rajasaur

5,340
2
27
22

I tried using your suggestion. I couldn't get it to work. $("#submitPO").click(function(){ alert($.data('result')); }); did nothing. – Mike S. Apr 12 '12 at 22:22

return from jquery ajax call

4 Answers4

Linked

Related