How to force angularjs update page after ajax call

Question

Now I am trying to add user information for a table, after I successfully send data,I have to refresh whole page to get update. I think I can use $scope.apply(), but where should I put it? in the promise? Here is my code:

Service

angular
  .module('ecom')
  .factory(
    'PCservice',
    [
      '$q',
      'sessionId',
      function($q, sessionId) {
       return {
        loadPersonalCCList : function() { // This is how I get user information from server
         var deferred = $q.defer();
         $
           .ajax({
            type : "GET",
            async: false,
            url : ECOM_BASE_URL
              + "/esapp/EDService/personalcc/cards/list?sessionID="
              + sessionId,
            dataType : "xml",
            cache : false,
            success : function(xml) {

             var data = xml2json(
               xml,
               {
                listPaths : [ /PERSONALCCLIST$/ ],
                numPaths : []
               }).OFX;

             deferred.resolve(data);

            }
           });
         return deferred.promise;
        },
        loadpaymentmethod:function(sessionId,companycode,paymenttype){
             var deferred = $q.defer();
             $
           .ajax({
            type : "GET",
            async: false,
            url : ECOM_BASE_URL+ "/esapp/EDService/system/compPayMeths",
            dataType : "xml",
            cache : false,
            data: {
            _session: sessionId,
            companyCode: companycode,
            paymentType: paymenttype
              },
            success : function(xml) {
             console.log(xml);
            /* var data = xml2json(
               xml,
               {
                listPaths : [ /PERSONALCCLIST$/ ],
                numPaths : []
               }).OFX;*/

             deferred.resolve(data);

            }
           });
         return deferred.promise;
        },
        saveNewPC: function(xmlString){ // This is where I save the new user information
             var deferred = $q.defer();
             $.ajax({
                    type: "POST",
                    url: ECOM_BASE_URL+"/esapp/EDService/personalcc/cards/save",
                    contentType: "text/xml",
                    dataType: "xml",
                    cache: false,
                    processData: false,
                    data: xmlString,
                    //success: init
                    success: function (xml) {
                       //console.log(xml);

                        deferred.resolve(xml);
                    }
                });
             return deferred.promise;
        }
       }
      } ]);

Controller

var promise = PCservice.loadPersonalCCList();
    promise.then(function(data) {

        $scope.personalccinfor = data.CCMSGSRSV1.PERSONALCARDLISTRS.PERSONALCCLISTINFO.PERSONALCCLIST;
        $scope.cardinfo = data.SIGNONMSGSRSV1.SONRS.PROFILE;
    });
    $scope.savechange = function(cardname, paymethod, webaddress, checktype, txtCCNumber, reimbValue) {
        var xmlstring = $scope.buildNewXML(cardname, paymethod, webaddress, checktype, txtCCNumber, reimbValue);
        var feedback = PCservice.saveNewPC(xmlstring);
        feedback.then(function(status) {
            PCservice.loadPersonalCCList().then(function(data){

        $scope.personalccinfor=data.CCMSGSRSV1.PERSONALCARDLISTRS.PERSONALCCLISTINFO.PERSONALCCLIST;
        $scope.cardinfo = data.SIGNONMSGSRSV1.SONRS.PROFILE;
        $scope.$apply();

    });
        });
};

HTML

<tr ng-repeat='pcdata in personalccinfor'>
        <td class='text-center'><a href="">{{pcdata.NAME}}</a><input type="hidden" name="cardId" id="cardId" value="{{pcdata.CARDID}}}"></td>
        <td class='text-center'>{{pcdata.WEBADDRESS}}</td>
</tr>

As you can see, I need to init page with data, then if user want to add new information, I need to re-call the loadPersonalCCList() to init page .

why use `$.ajax` calls from jquery instead of `$http` calls from angular? — Claies, Feb 25 '15 at 21:20
Angular XML - http://rabidgadfly.com/2013/02/angular-and-xml-no-problem/ (if you can get a plugin past EA) — tymeJV, Feb 25 '15 at 21:26

score 1 · Answer 1 · edited May 23 '17 at 12:28

Your problem is you are using $.ajax which is jquery, after making an ajax angular doesn't get any idea about should i need run my digest cycle to update my scope variable. So thats why angular does have $http which make ajax call and after that run digest cycle and update all scope variables.

$http

It is same as that of $.ajax, but this function wrap inside a $apply() function which call $digest cycle, and $digest cycle updates all the variables throughout the scope.

Covert your $.ajax to $http call will solve your binding issue.

There is way to update binding by manually running $apply() method to forcefully update the scope level binding

if(!$scope.$$phase) //checking if any digest cycle is running or not
  $scope.$apply();

But but don't use $scope.$apply() its anti pattern in Angular JS

@linyuanxie Mark answer as correct, if it does solve your problem/ or almost solve the problem — Pankaj Parkar, Feb 26 '15 at 15:00

How to force angularjs update page after ajax call

1 Answers1