Question

I am trying to get a second function to run based on the results of the first.

$('#email').blur(function () {

id = $(this).attr('id');
$(myObj).data(id,""); 

is_email(id); // If it's a valid email, it does this: $(myObj).data(id,"ok");

// Now if it's a valid email address, I want to run a second function to see if
// it's already taken.

if ($(myObj).data("email") == "ok") {

    $(myObj).data("email",""); // Resets the value...
    is_taken(id, "employees", "email"); // To test it again...

}   

});

The first part works fine, but when I get to if($(myObj)…. it is never checked. I’m assuming because this is set on the same blur event. I thought by putting it AFTER the first function, it would check the value of this object after the first function was complete. My guess is that it’s checking if the value is “ok” before the first function has had a chance to return the value.

Answer 1

Because the functions use AJAX, the second is being invoked before the first AJAX call returns and sets the data value. The key letter in AJAX is the first ‘A’ – asynchronous, meaning the code flow continues without waiting for the response. You can avoid this (and avoid using data to store the intermediate results) by changing your is_email function to accept a callback. Run the second function as the callback when the AJAX call completes depending on the result of the first call.

function is_email( id, type, check, callback )
{
     var that = this;
     $.post( '/email/check', $('#'+id).val(), function(result) {
           if (result == 'ok') {
                if (callback) {
                   callback.call(that,id,type,check);
                }
           }
     }
}

Used as:

is_email(id, "employees", "email", istaken);