Ajax callbacks didn't return

Question

Im trying to create an ajax function to get some params of the DB each time, but when I call the ajax method it is not returning correctly, when I do it debug the value was ok, but the return result isn't works.

$(document).ready(function () {

  function foo(mod){
    var uri="some url";

    $.ajax({
      type: "GET",
      url: uri,
    }).done(function( data ) {
      return data;
    });
  }

  // alert to get the result is always printing undefined
  alert(foo("param_1"));

});

Welcome to the wonderful world of **async**! You can't do that. — SLaks, Oct 27 '13 at 18:48
@RoyiNamir: Why not? It's a handy, contained, non-global scope. :-) — T.J. Crowder, Oct 27 '13 at 18:49
@T.J.Crowder document.ready - i would say -is not the place for declaring functions (unless you _really_ need it only for that specific scope) but for doing stuff when you want to be sure that the dom is built. — Royi Namir, Oct 27 '13 at 18:50
@RoyiNamir: It's purely a point of style whether you use the scope you already have there, or create a second scoping function to contain your code to avoid globals. There's zero harm in putting the code in the `ready` callback. (Well, no more harm than using `ready` at all, which I don't recommend if you control where your `script` tags go. :-) ) — T.J. Crowder, Oct 27 '13 at 18:52
@T.J.Crowder let's say this : if it was the last code on his document - he could place it at the bottom with no document.ready at all. ( assuming of course no future `document.write` stuff etc...). :-) — Royi Namir, Oct 27 '13 at 18:53
@RoyiNamir: Right, but he'd still want a scoping function to avoid creating needless globals. (And that's exactly what I do: A scoping function in a script tag at the end of the doc without `ready`.) — T.J. Crowder, Oct 27 '13 at 18:55
@T.J.Crowder for scoping he could use pure IIFE. no need for document.ready for that.....(anyway - we agree :-)) — Royi Namir, Oct 27 '13 at 18:56

score 4 · Accepted Answer · answered Oct 27 '13 at 18:47

foo can't return the result of the ajax call, because the ajax call is asynchronous. foo returns before the call completes. Moreover, the return in your done handler returns from the done handler, not foo.

You'll need to have foo accept a callback, and then call that:

$(document).ready(function () {


  function foo(mod, callback){
    var uri="some url";

    $.ajax({
      type: "GET",
      url: uri,
    }).done(function( data ) {
      callback(data);
    });
  }

  // alert to get the result is always printing undefined
  foo("param_1", function( data ) {
      alert(data);
  });

});

Or if you're really do no processing on it at all before giving it to the callback, you could supply callback to done directly:

$(document).ready(function () {


  function foo(mod, callback){
    var uri="some url";

    $.ajax({
      type: "GET",
      url: uri,
    }).done(callback);
  }

  // alert to get the result is always printing undefined
  foo("param_1", function( data ) {
      alert(data);
  });

});

Eric Herlitz · Answer 2 · 2013-10-27T18:56:34.847

You can set async as false, but instead I recommend you to implement success and error handlers that can work async

$(document).ready(function() {

    function foo(mod) {
        var uri = "some url";

        $.ajax({
            type: "GET",
            url: uri,
            success: successHandler,
            error: errorHandler
        });
    }

    function successHandler(data, textStatus, xhr) {
        // Handle your data here
        console.log(data);
        //alert(data);
    }

    function errorHandler(xhr, textStatus, errorThrown) {
        // Magic
    }

    // alert to get the result is always printing undefined
    //alert(foo("param_1"));
    foo("param_1");
});

Ajax callbacks didn't return

2 Answers2