CODEWITHSUNDEEP
angularjs
Arav
Arav

Reputation: 5247

angular js opening modal after ajax call - not updaing html

Making an ajax call after a button click and updating the html inside the modal via angular js. Sometime html inside modal is not updating. Tried $scope.$apply(); function but still its not updating sometimes. Provided the angular js and bootstrap code below . editfilterrules function is called after clicking on a button, 

  $scope.editfilterrules=function(filterid,initid){
         console.log('edit filter rules filterid:' + filterid + ' initid:' + initiativeid );
            $http({
                    method : "GET",
                    url : 'testoptions.php?filterid=' + filterid + '&initid=' + iniid
             }).then(function mySucces(response) {
            //  console.log(response.data);
              $scope.filterrulesDivCon=$sce.trustAsHtml(response.data);
             // $('#filterrulesDiv').html(response.data);
             // $scope.$apply();
              $('#editfilterrulesModal').modal();

            }, function myError(response) {
             });
     }



 <div class="modal fade" id="editfilterrulesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Filter Rules</h4>
              </div>
              <div class="modal-body">
                        <div id="filterrulesDiv" ng-bind-html="filterrulesDivCon" ng-cloak> </div>
              </div>

            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

Upvotes: 0

Views: 808

Answers (2)

ngCoder
ngCoder

Reputation: 2105

As pointed out by @llp you are opening your modal out of angular scope,instead you can use Bootstrap UI modal which is lot flexible.

you can also use $apply() and do something like this if you are not thinking to use bootsrap.

$scope.editfilterrules=function(filterid,initid){
         console.log('edit filter rules filterid:' + filterid + ' initid:' + initiativeid );
            $http({
                    method : "GET",
                    url : 'testoptions.php?filterid=' + filterid + '&initid=' + iniid
             }).then(function mySucces(response) {

              $scope.filterrulesDivCon=$sce.trustAsHtml(response.data);
             $scope.$apply(function() {
                    $('#editfilterrulesModal').modal();
               });


            }, function myError(response) {
             });
     }

with Bootstrap UI Below I've added a sample code snippet on how to achieve the same.Here is a plunker for demo

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);//add bootstrap dependency
    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
      var $ctrl = this;
      $ctrl.items = ['item1', 'item2', 'item3'];

      $ctrl.animationsEnabled = true;

      $ctrl.open = function (size, parentSelector) {
        var parentElem = parentSelector ? 
          angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
    //this opens the modal and an instance is created and assigned to variable..
        var modalInstance = $uibModal.open({
          animation: true,
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          templateUrl: 'myModalContent.html',//HTML content
          controller: 'ModalInstanceCtrl',//specific controller for modal
          controllerAs: '$ctrl',
          size: size,
          appendTo: parentElem,
          resolve: {
            items: function () {
              return $ctrl.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $ctrl.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };


    });

Upvotes: 1

llp
llp

Reputation: 71

It seems that the way you called the modal is out of the scope of angular.

Actually, it doesn't recommended using jQuery and Angular at the same time.

If you want to use the Bootstrap style, I suggest you to use UI-Bootstrap.It contains a set of native AngularJS directives based on Bootstrap's markup and CSS.

And the Modal directive.

Hope this will help you.

Upvotes: 1

Related Questions