JQuery returning undefined when it should return an int

Question

I'm very new to JQuery but am really putting forth an effort to learn more about it. I've written a function that I'm expecting a return value back from but am only getting undefined. Can someone please show me where I'm going wrong?

Here is my code.

function test(){
  $.ajax({
    url:"",
    dataType:"json",
    type:'POST',
    data:{countMedia:'true'},
    success:function(data){
return data.value;
    }
  });
}

alert(test()); // returns undefined when it should return an int value

Also, am I allowed to write a function inside of document ready? This is where I need to use it.

ajax is asynchronous, `test` will have returned before the success callback happens. — zzzzBov, Aug 28 '13 at 19:32
OK, thank you for the explanation. So, the possibility of me writing a single ajax function is out of the question. — NaN, Aug 28 '13 at 19:33
Best explanation about this issue: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Felipe Miosso, Aug 28 '13 at 19:34
@Sebastien, I know, thanks for noticing. I'm just posting back to the same page. It's working like this and again, this is only an exercise to learn — NaN, Aug 28 '13 at 19:35
Best explanation about this issue: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call Look at @Benjamin Gruenbaum answer. — Felipe Miosso, Aug 28 '13 at 19:35

letiagoalves · Accepted Answer · 2013-08-28T19:42:38.407

1

$.ajax is asynchronous and so you should not return a value in your AJAX callback.

You should instead pass a callback to test function to execute when the request is completed.

Something like this:

function test(callback){
  $.ajax({
    url:"",
    dataType:"json",
    type:'POST',
    data:{countMedia:'true'},
    success:function(data){
        callback(data.value);
    }
  });
}

test(function(data) {
    alert(data);
});

To pass in the data request as a param (as you asked in the comments):

function test(requestData, callback){
  $.ajax({
    url:"",
    dataType:"json",
    type:'POST',
    data:requestData,
    success:function(data){
        callback(data.value);
    }
  });
}

test({countMedia:'true'}, function(data) {
    alert(data);
});

edited Aug 28 '13 at 19:42

answered Aug 28 '13 at 19:33

letiagoalves

11,224
4
40
66

OK, great! This makes sense to me, thank you. The best answer so far. :) Can you tell me if I use a callback as you're suggesting, if I'd also be able to pass in the `data` as a param? – NaN Aug 28 '13 at 19:37
I'm glad it helped you. Yes you will be able. – letiagoalves Aug 28 '13 at 19:39
Great. Again, please forgive my noobish glow here, but how do I call `test()`? I just tried `test()` and am expecting the alert but I get nothing. – NaN Aug 28 '13 at 19:41
@user1709311 see now my updated answer of how to pass request data to test function. What error are you getting? – letiagoalves Aug 28 '13 at 19:43
I'm not getting an error at all. Nothing happens. Am I calling the test function correctly? There are no JS errors in the log – NaN Aug 28 '13 at 19:44
Check if `url` is correct and if the server is responding a well-formatted JSON. I can assure you that this code works when giving it a correct `url`. – letiagoalves Aug 28 '13 at 19:46
I just copied your updated code and it is in fact working. Thank you letiagoalves! I'll compare what I was doing to what you just posted to see where I was going wrong. – NaN Aug 28 '13 at 19:48

score 0 · Answer 2 · answered Aug 28 '13 at 19:34

0

That's how AJAX works(Asynchronously).

function test(){
  $.ajax({
    url:"",  // No url found here 
    dataType:"json",
    type:'POST',
    data:{countMedia:'true'},
    success:function(data){
    alert(data.value)
    }
  });
}
test();

answered Aug 28 '13 at 19:34

Suresh Atta

120,458
37
198
307

Is there a way to save the value and use it after it's been set? – NaN Aug 28 '13 at 19:35
The best way you can do it is ,Simply write another function and call that function in onSuccess of ajax and pass `data` to it . – Suresh Atta Aug 28 '13 at 19:40

JQuery returning undefined when it should return an int

2 Answers2