CODEWITHSUNDEEP
javascriptangularjsajax
Aslam Jiffry
Aslam Jiffry

Reputation: 1316

Angularjs asynchronous callback handling

$scope.$watch('Status.statusId', function (data) {

    GetCustomerWiseRmTransfers();

    if (($scope.gridDisplayObjectList.length <= 0) || ($scope.Status && $scope.Status.statusId == 325) || ($scope.Status && $scope.Status.statusId == 326)) {
        $scope.IsApproveVisible = false;
        $scope.IsRejectVisible = false;
        $scope.IsSaveVisible = false;
    } else {
        $scope.IsSaveVisible = true;
    }

    if (!$scope.$$phase) $scope.$apply();
}, true);

In above code the $scope.$watch() function calls GetCustomerWiseRmTransfers() function .What I expected from $scope.$watch() function is after executing GetCustomerWiseRmTransfers() completely it will execute other statements in $scope.$watch() function .But I am wrong this case.

function GetCustomerWiseRmTransfers() {
    customerWiseRmTransferService.GetCustomerWiseRmTransfers({
        statusId: angular.toJson($scope.Status.statusId)
    }, function (data) {
        $scope.gridDisplayObjectList = data;

        for (var i = 0; i < $scope.gridDisplayObjectList.length; i++) {
            var fdate = ToJavaScriptDate($scope.gridDisplayObjectList[i].RequestedDate);
            $scope.gridDisplayObjectList[i].RequestedDate = fdate;
        }

        var inputs = document.getElementsByTagName('input');

        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type.toLowerCase() == 'checkbox') {
                inputs[i].checked = false;
            }
        }

        if (!$scope.$$phase) $scope.$apply();
    });
};

Within GetCustomerWiseRmTransfers() function it has an AJAX call to another function.So After excecuting AJAX function it exits from the function and executes the statements in $scope.$watch() function. After complete executing all statements in $scope.$watch() ,then GetCustomerWiseRmTransfers() executes remainging Callback Function.

But what I want is after completely executing GetCustomerWiseRmTransfers() function,$scope.$watch() should execute remaining Statements.

Can somebody share your thoughts on this?

Upvotes: 0

Views: 1384

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074485

Modify GetCustomerWiseRmTransfers to accept a callback it calls when the ajax work is complete, or have it return a promise it resolves when the ajax work is complete, and use that callback/promise in the code in $watch.

Re

How can i modify to accept callback ?

See this question and its answers, which I found using the search [js] create callback.

Basically, you

  1. Add an argument to your GetCustomerWiseRmTransfers

  2. Call it from within the ajax completion callback

  3. Pass a function to GetCustomerWiseRmTransfers when you call it, just like you do with $watch, setTimeout, an event handler, ...

So:

function GetCustomerWiseRmTransfers(callback) {
// Declare it ----------------------^
    // ...
        if (!$scope.$$phase) $scope.$apply();

        callback(); // <==== Call it
    });
};

And when calling it, move everything after the call to GetCustomerWiseRmTransfers in your $watch callback into the function you pass in:

GetCustomerWiseRmTransfers(function() {
    // ...everything that followed it in the $watch callback...
});

Upvotes: 2

Related Questions