AJAX return true/false - I have implemented a callback

Question

First of all I have read these topics:

and I still cannot figure out how to get this to work.

$("#btn_go").on('click', function(){
    if(validateUserDetails() == false){ 
        return;
    }
});

The function validateUserDetails has the following:

function validateUserDetails(){
    var bool = false;
    
    $.ajax({
        url: 'response.php?type=validateUserDetails',
        type: 'POST',
        dataType: 'json',
        data: {
            name: $("#checkout_name").val(),
            email: $("#checkout_email").val(),
            "country": $("#checkout_country").val(),
            "city": $("#checkout_city").val()
        },
        success: function(data){
            console.log(data); // this is currently returning FALSE
                               // Which is totally correct!
            if(data == true){ bool = true; }
            return trueOrFalse(bool);
        }
    });
}

function trueOrFalse(bool){
    return bool;
}

However, this is not working because if I output the function I get undefined, which means that the function is not retuning the correct value. console.log(validateUserDetails()); // = undefined

What am I doing wrong?

You don't have return in validateUserDetails function... So nothing is returned — Regent, Apr 15 '14 at 08:45
I don't have? don't you see there `return trueOrFalse(bool)`? — Linesofcode, Apr 15 '14 at 08:46
It is not used anywhere: it is 'return' for anonymous function, called on success callback — Regent, Apr 15 '14 at 08:48
Stop trying to return from an *asynchronous* function. Handle the data in the callback function and in functions you can from it. Go forewords, not backwards. — Quentin, Apr 15 '14 at 08:49

score 20 · Accepted Answer · edited Apr 30 '19 at 09:35

20

ajax request is asynchronous. Don't use the sync: true option, it's not really a good idea. What you can do is to use the promise that the ajax returns, so:

function validateUserDetails(){

return $.ajax({
    url: 'response.php?type=validateUserDetails',
    type: 'POST',
    async: false,
    dataType: 'json',
    data: {name: $("#checkout_name").val(), email: $("#checkout_email").val(), "country": $("#checkout_country").val(), 
           "city": $("#checkout_city").val()},
    success: function(data){
        console.log(data); // this is currently returning FALSE
    }
  });
}
$("#btn_go").on('click', function(){
    validateUserDetails().done(function(data){
         if(data == "someValue")
            return "whatever you want";
    });
});

edited Apr 30 '19 at 09:35

HybrisHelp

5,518
2
27
65

answered Apr 15 '14 at 09:02

steo

4,586
2
33
64

what if the ajax function fails? – serge Aug 13 '19 at 08:32
there are the `catch`, `error` callback that can help you out. – steo Aug 13 '19 at 10:04
the OP problem is what to return if validation fails, you describe only if validation succeeds... – serge Aug 13 '19 at 12:24

score 13 · Answer 2 · edited Apr 09 '19 at 04:08

As noone has answered yet, I will:

First of all, you can try sync request

function validateUserDetails() {
    var bool = false;

    $.ajax({
            url: 'response.php?type=validateUserDetails',
            type: 'POST',
            async: false,
            dataType: 'json',
            data: {name: $("#checkout_name").val(), email: $("#checkout_email").val(), "country": $("#checkout_country").val(), "city": $("#checkout_city").val()},
            success: function(data) {
                console.log(data);  // this is currently returning FALSE
                                    // Which is totally correct!
                if (data == true) {
                    bool = true;
                }
            }
    });

    return trueOrFalse(bool);
}

If it is not acceptable, you can use $.Deferred()

function validateUserDetails() {
   var deferred = $.Deferred();
   var bool = false;

   $.ajax({
      url: 'response.php?type=validateUserDetails',
      type: 'POST',
      dataType: 'json',
      data: {name: $("#checkout_name").val(), email: $("#checkout_email").val(), "country": $("#checkout_country").val(), "city": $("#checkout_city").val()},
      success: function(data) {
      console.log(data);  // this is currently returning FALSE
                                            // Which is totally correct!
            if (data == true) {
                            bool = true;
                        }
                    }
      complete: function () {
                        deferred.resolve(trueOrFalse(bool));
                    }
      });

   return deferred.promise();
}

function trueOrFalse(bool){
        return bool;
}

function test() {
   var promise = validateUserDetails();
   promise.done(function(result) {
        console.log("Bool: " + result);
   });
}

I have upvoted your post because that works too. But I think the post I've set as "final answer" is better. Thank you. — Linesofcode, Apr 15 '14 at 09:11
@user3355243 that's your choice :) And yes: if you have chain of only 1 async request, .done() looks better and simplier — Regent, Apr 15 '14 at 09:18
can't this `deferred.resolve(trueOrFalse(bool));` just be `deferred.resolve(bool);` ? — dbinott, Oct 07 '16 at 13:32
@KrunchMuffin it can. Function `trueOrFalse` looks like useless one. — Regent, Oct 07 '16 at 20:30

score 2 · Answer 3 · answered Apr 15 '14 at 08:55

Your function validateUserDetails return no value, she just execute an asynchronous function. The asynchronous function return true or false, but nothing for catching it.

It's like this :

function validateUserDetails(){

    // asynchronous function
    $.ajax({...});

    return undefined;
}

If you try console.log(trueOrFalse(bool)); you will see "true" or "false", but you can't use "return" into asynchronous function. You must do something into success function, who use "data" (log, or another function)

+1 Yes, what you told is correct. It is possible to pass the arguments to the function and then use those arguments in the success function. — Linesofcode, Apr 15 '14 at 09:13

AJAX return true/false - I have implemented a callback

3 Answers3

Linked