Updating View in Angular js on ajax success callback

Question

I am working on a project where I am getting list of the offers from a service. Each offer is Active or Inactive. I am displying only Active offers on a view on tabular format by giving ajax call and using ng-repeat.

When I click on the link Inactivate Offer then I am giving another ajax request to inactivate that offer in database. So once I inactivate offer it should not be displyed on view. My code to fect offer and Inactivate the offer is :

    mPosServices.factory('mosServiceFactory',function($http,$rootScope){
   return{
       viewAllOffers:function(){
           var allOffers = $http({
                        method: "get",
                        url: "http://myServiceUrl/omnichannel/merchant/offer/view/all?enrollmentId="+$rootScope.enrollMentId,
                    });
               return allOffers;     
       },

       inActivateOffer : function(id){
           var inactivate = $http({
               method:'get',
               url : "http://myServiceUrl/omnichannel/merchant/offer/"+id+"/status/INACTIVE?enrollmentId="+$rootScope.enrollMentId,
           });
           return inactivate;
       }
   } 
});

and controller code is to fect the offers and inactivate offer is :

var mPosController = angular.module('mPosController', []);

mPosController.controller('offerController', ['$scope', '$rootScope', 'mosServiceFactory', 'ngDialog', function ($scope, $rootScope, mosServiceFactory, ngDialog) {
  mosServiceFactory.viewAllOffers().then(function (data) {
            $scope.offers = data.data.offers;
            console.log($scope.offers);
        });

    $scope.inActivate = function (id) {
        mosServiceFactory.inActivateOffer(id).then(function (data) {
           console.log(data);
        });
      }
    }]);

Offer is getting successfully inactivated in response of $scope.inActivate method but that perticular offer is still visible in view.

So how to display on Active offers once I inactivate a offer using service call ?

probably wrap that $scope.offers = data.data.offers in a $scope.$applyAsync(function () { }); because you are outside of the digest cycle - which means angular can't pick up the change! Or just call $scope.$apply() after that code — Callum Linington
– Callum Linington, Commented Jun 15, 2015 at 7:12

Christina · Accepted Answer · 2015-06-15 07:30:36Z

1

Your code correctly performs a GET request to inactivate the offer, however you do not "tell" Angular that the offer has been inactivated. What you need to do is remove the offer from the offers list $scope.offers once the offer is successfully inactivated (ie. when the inActivateOffer promise is resolved). You could try something like this:

$scope.inActivate = function (id) {
    mosServiceFactory.inActivateOffer(id).then(function (data) {
        for (var i = 0; i < $scope.offers.length; i++) {
            if ($scope.offers[i].id === id) {
                $scope.offers.splice(i, 1);
            }
    });
}

answered Jun 15, 2015 at 7:30

Christina

3,7623 gold badges24 silver badges32 bronze badges

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

1 Comment

user1608841 Over a year ago

thanks your solution worked. I did some other thing like when the inActivateOffer promise is resolved i broadcasted a msg that offer has been inactive using $rootScope.$broadcast and listen this broadcasted msg in controller using $on and again called the service mosServiceFactory.viewAllOffers() . I guess my solution in not relevent as its giving unnecessary service call

Collectives™ on Stack Overflow

Updating View in Angular js on ajax success callback

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related