Angularjs asynchronous callback handling

Question

$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?

Very nearly duplicates How do I return the response from an asynchronous call? (or maybe it's not just near). — T.J. Crowder
– T.J. Crowder, Commented Aug 23, 2016 at 6:38

Community · Accepted Answer · 2017-05-23 10:27:26Z

2

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

Add an argument to your GetCustomerWiseRmTransfers
Call it from within the ajax completion callback
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...
});

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Aug 23, 2016 at 6:37

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aslam Jiffry Over a year ago

How can i modify to accept callback ?.. I am using angularjs.

T.J. Crowder Over a year ago

@AslamJiffry: Have you looked for how to do that? There's this question and its answers, for instance. (I just did a search; the fact one of those answers is mine is a bit of a coincidence. :-) )

Aslam Jiffry Over a year ago

Yes I did, I tried to use Queing functions according to order that need to execute using angular.But it didn't work.

T.J. Crowder Over a year ago

@AslamJiffry: I have no idea what a "queening function" is, I'm afraid. But the answers in that link show exactly how to create a callback and call it.

T.J. Crowder Over a year ago

@AslamJiffry: I've updated the answer to fold some of the linked content in. I'm trying not to just write it for you, as you won't learn anything that way.

Collectives™ on Stack Overflow

Angularjs asynchronous callback handling

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related