Ajax returns value but function returns null

Question

functions.js

function clients(id){
    var result = '';
    $.ajax({
        type: "GET",
        url: "classes/response.php?type=clients",
        data: {id: id},
        success: function(data){
            result = data;
            console.log(result); // retrieves 'John'
            console.log(data);   // retrieves 'John'
        }
    });
    return result;
}

And in my other file main.js

$("#client_check").on('click', function(){

     var input = $("#client_id");
     var name  = clients(input.val());

     console.log(name); // retrieves empty

     $("#client_id").val('');

});

Shouldn't this work? The function output the value perfectly, but when I call the function to a variable it retrieves empty.

What am I doing wrong?

you're returning the result when the ajax call is still running — Fabrizio Calderan, Mar 03 '14 at 12:04
@RajeshCP — Oh no. Locking up the JS event loop while waiting for the HTTP response is an awful idea. — Quentin, Mar 03 '14 at 12:08
@Quentin noted, just out of curiosity then why exactly that option ? — Triode, Mar 03 '14 at 12:10
@RajeshCP — It's been in there for 14 years, removing it would break backwards compatibility. — Quentin, Mar 03 '14 at 12:11

score 0 · Answer 1 · answered Mar 03 '14 at 12:04

Try this, My changes only callback function rest is as per OP

function clients(id,callBack){
    $.ajax({
        type: "GET",
        url: "classes/response.php?type=clients",
        data: {id: id},
        success: function(data){
            result = data;
            console.log(result); // retrieves 'John'
            console.log(data);   // retrieves 'John'
            callBack(data);
        }
    });
}


$("#client_check").on('click', function(){

     var input = $("#client_id");
     clients(input.val(),function(name){
        console.log(name);
     });
     $("#client_id").val('');

});

score -1 · Answer 2 · edited May 23 '17 at 12:10

-1

Solved according to: How do I return the response from an asynchronous call?

function clients(id){
    return 
      $.ajax({
          type: "GET",
          url: "classes/response.php?type=clients",
          data: {id: id},
      });
}
// And to call it:
clients(input.val()).done(function(r){
    console.log(r);
});

edited May 23 '17 at 12:10

Community

1
1

answered Mar 03 '14 at 12:15

user3243925

271
2
4
12

Ajax returns value but function returns null

2 Answers2