angular js opening modal after ajax call - not updaing html

Question

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

ngCoder · Accepted Answer · 2016-10-28 07:04:28Z

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());
        });
      };


    });

llp · Accepted Answer · 2016-10-28 03:18:42Z

1

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.

answered Oct 28, 2016 at 3:18

llp

715 bronze badges

Collectives™ on Stack Overflow

angular js opening modal after ajax call - not updaing html

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related