I have two AJAX requests one after another-

var firstResult;
var secondResult;

FirstAjaxrequest({
        callback: function (options, success, response) {
            if(success)
            {
                firstResult = true;
            }
            else
            {
                firstResult = false;
            }
        }    
    });

SecondAjaxrequest({
     callback: function (options, success, response) {
            if(success)
            {
                secondResult= true;
            }
            else
            {
                secondResult= false;
            }
     }    
});

DisplayMessage(); // This function should display a message depending on     
                     FirstResult and secondResult

I have two AJAX requests one after another-

var firstResult;
var secondResult;

FirstAjaxrequest({
        callback: function (options, success, response) {
            if(success)
            {
                firstResult = true;
            }
            else
            {
                firstResult = false;
            }
        }    
    });

SecondAjaxrequest({
     callback: function (options, success, response) {
            if(success)
            {
                secondResult= true;
            }
            else
            {
                secondResult= false;
            }
     }    
});

DisplayMessage(); // This function should display a message depending on     
                     FirstResult and secondResult

• javascript
• extjs

Share Improve this question Follow asked Jan 21, 2013 at 14:08 Microsoft DNMicrosoft DN 10k1010 gold badges5454 silver badges7373 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 12

You could create a variable for each request, signifying a successful request. Change this variable for each request respectively, when a successful request is made, then call your function.

Within your function simply check both variables, if they're both true, then both requests were successful, otherwise at least one was not and the if() condition will be false.

var firstResult = false,
    secondResult = false;

FirstAjaxrequest({
    callback: function (options, success, response) {
        if(success) {
            firstResult = true;
            DisplayMessage();
        }
    }    
});

SecondAjaxrequest({
    callback: function (options, success, response) {
        if(success) {
            secondResult= true;
            DisplayMessage();
        }
    }    
});

function DisplayMessage(){
    if(firstResult && secondResult){
        //Both requests successful
    } else {
        //Either still waiting for a request to plete
        // or a request was not successful.
    }
}

There might be a better way to do it in EXTJS, but a plain JS solution is

var firstResult;
var secondResult;
var reqCount = 2;
var returnedCount = 0;

function isDone () {
    returnedCount++
    if ( returnedCount === reqCount ) {
         console.log(firstResult, secondResult);
    }
}

FirstAjaxrequest({
        callback: function (options, success, response) {
            if(success)
            {
                firstResult = true;
            }
            else
            {
                firstResult = false;
            }
            isDone();
        }    
    });

SecondAjaxrequest({
     callback: function (options, success, response) {
            if(success)
            {
                secondResult= true;
            }
            else
            {
                secondResult= false;
            }
            isDone();
     }    
});

Give this a try

FirstAjaxrequest({
            callback: function (options, success, response) {
                if(success)
                {
                    firstResult = true;
                }
                else
                {
                    firstResult = false;
                }
                SecondAjaxrequest({
                     callback: function (options, success, response) {
                            if(success)
                            {
                                secondResult= true;
                            }
                            else
                            {
                                secondResult= false;
                            }
                            DisplayMessage(); // Now we have access to first and second result as the 
                                             //as the second request is within the scope of the first request
                     },
                     scope: this // We can pass the first request to the second request as the context 
                });
            }    
        });

After the pletion of each request, you should check if the result of the other one is received or not. Some thing like this:

var result1 = null;
var result2 = null;
function DoAjax() {
    $.get(url1, {}, function (data) {
         result1 = data;
         DoSth();
    });
    $.get(url2, {}, function (data) {
         result2 = data;
         DoSth();
    });
}
function DoSth() {
    if(result1 != null && result2 != null) {
         //...
    }
}

Warning: jQuery answer. I'm not sure if extjs has similar support for Deferreds and Promises.

This is a perfect opportunity to learn about jQuery Deferred:

$.when(firstAjaxrequest(...), secondAjaxrequest(...))
.then(function (firstResult, secondResult) {
    ...
});

This assumes your firstAjaxrequest and secondAjaxrequest functions both return Deferred or Promise objects, such as those returned by $.ajax.