I need the function to return true if the ajax result is true

Question

Here's my code:

    function validateField(field, input) {

    if (field && input) { 

        $.ajax({
            type: 'POST',
            url: '<?php echo site_url("ajax/verify"); ?>',
            dataType: 'json',
            data: { 'field' : field, 'input' : input},
            success: function(result) {
                var available = result.available;
                if (available == 1) {

                   // return true (for the entire function);
                }

            }
        });
    } 

    return false;


}

Answer 1

Nowadays the most correct to do that is to use $.Deferred:

function validateField(field, input) {
    if (field && input) { 
        return $.ajax({
            type: 'POST',
            url: '<?php echo site_url("ajax/verify"); ?>',
            dataType: 'json',
            data: { 'field' : field, 'input' : input}
        }).pipe(function(result) {
            var available = result.available;
            return available == 1;
        });
    }

    return $.Deferred().resolve(false);
}

validateField('somefield', 'someinput')
    .done(function(result) {
        if (result) {
            alert('it is true');
        } else {
            alert('it is false');
        }
    });

And callback-based solution (I don't like it ;-):

function validateField(field, input, callback) {
    var cb = $.isFunction(callback) ? callback : $.noop;

    if (field && input) { 
        $.ajax({
            type: 'POST',
            url: '<?php echo site_url("ajax/verify"); ?>',
            dataType: 'json',
            data: { 'field' : field, 'input' : input},
            success: function(result) {
                var available = result.available;
                cb(available == 1);
            }
        });
        return;
    }

    cb(false);
}

validateField('somefield', 'someinput', function(result) {
    if (result) {
        alert('it is true');
    } else {
        alert('it is false');
    }
});

Answer 2

The only way to do that is to make the request synchronous (async: false) and toggle the value of a boolean variable in the outer scope within the success function. This is not recommended, nor even supported as of jQuery 1.8. Ajax is based on a callback pattern, triggering some function if some condition is met. It would be better to do whatever it is you do if valid, within the success function of the ajax callback.

function validateField(field, input, success) {
    var valid = false;

    if (field && input) { 
        $.ajax({
            type: 'POST',
            async: false,
            url: '<?php echo site_url("ajax/verify"); ?>',
            dataType: 'json',
            data: { 'field' : field, 'input' : input},
            success: function(result) {
                var available = result.available;
                if (available == 1) {

                   // return true (for the entire function);
                    valid = true;

                    // BETTER TO CALL doSomethingIfValid(); here
                }

            }
        });
    }

    return valid;
}​