ajax return true/false - I have implemented a callback

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)


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);
   });
}

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";
    });
});

Tags:

Ajax

Jquery