synchronize two ajax jquery function

Question

I have two function of jQuery. Both the functions are calling jQuery ajax.
both have property async: false.
In both the function I am redirecting on basis of some ajax response condition.

In the success of first function I am calling the another function and then redirecting to another page. But my first function is not redirecting because my second function is not waiting of the response of the first function.
Hope problem is clear from my question.

my first function is as below

function fnGetCustomer() {
function a(a) {
    $("#loading").hide();
    //on some condition
    //other wise no redirection
    self.location = a;
}
var b = $("input#ucLeftPanel_txtMobile").val();

"" != b && ($("#loading").show(), $.ajax({
    type: "POST",
    url: "Services/GetCustomer.ashx",
    data: { "CustMobile": b },
    success: a,
    async: false,
    error: function () {
        $("#loading").hide();
    }
}));

}

and my second function I am calling the first function

function fnSecond() {
    $.ajax({
    type: "POST",
    url: "some url",
    async: false,
    data: { "CustMobile": b },
    success: function(){ 
       fnGetCustomer();
       //if it has all ready redirected then do not redirect
        // or redirect to some other place 
     },
    error: function () {

        $("#loading").hide();
    }

}));

}

I am using my first function all ready. So I don't want to change my first function.

Answer 1

If you don't need the result of the first AJAX call to be able to send the second you could add a counter to keep track of the calls. Since you can send both calls at the same time it'll be a lot more responsive.

var requestsLeft = 2;

$.ajax({
    url: "Firsturl.ashx",
    success: successFunction
});

$.ajax({
    url: "Secondurl.ashx",
    success: successFunction
});

function successFunction()
{
    requestsLeft--;
    if (requestsLeft == 0)
        doRedirectOrWhatever();
}

If you absolutely need to do them in order you could do something like this. My example expects a json response but that's no requirement for this approach to work.

var ajaxurls = ["Firsturl.ashx",  "Secondurl.ashx"]

function doAjax()
{
    $.ajax({
        url: ajaxurls.shift(), // Get next url
        dataType: 'json',
        success: function(result)
        {
            if (result.redirectUrl) // or whatever requirement you set
                /* redirect code goes here */
            else if (ajaxurls.length>0) // If there are urls left, run next request
                doAjax();
        }
    });
}
doAjax();

Answer 2

A set up like this should work;

$.ajax({
    data: foo,
    url: bar
}).done(function(response) {
    if (response == "redirect") {
        // redirect to some page
    } else {
        $.ajax({
            data: foo,
            url: bar
        }).done(function(response2) {
            if (response2 == "redirect") {
                // redirect to some other page
            } else {
                // do something else
            }
        });
    }
});​

I've not tested doing something like this, but that's roughly how I'd start off