Nodejs Angularjs Mongoose internet explorer 11 compatibility

Question

I am developping and administration panel using Angularjs as a frontend framework , Nodejs in the backend and Mongoose for mongoDB models.

the administrator role can delete all the users as follows :

AdminPanel.html (in this page, i am displaying the list of users that can be deleted by the website administrator)

<!-- Header -->
    <div ng:include="'/views/common/header.html'"></div>
<!-- End Header -->


<div data-ng-init='initial()'>
    <br>
    <br>

    <span style="float:right"><b>Bienvenue {{admin.local.nom }} !</b> </span>
    <br>
    <div style="float:right">
       <a href="/logout"> <i class="fa fa-unlock-alt"></i> Se déconnecter </a>
    </div>

    <br>
    <span class="label label-primary">{{listeProfils.length}}</span>
    <div class="row">
      <div class="col-md-4 text-center"> <span>Mes comptes  :</span>  <span class="label label-primary">{{comptes.length}}</span></div>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control input-sm" ng-model="query">
          <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
          </span>
        </div>
      </div>
      <div class="col-md-4 text-center">

      </div>
    </div>
    <br>
    <table class="table table-hover table-bordered table-condensed">
        <thead>
            <tr>
                <th ng-repeat="header in headers" class="centering">{{header}}</th>
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="compte in comptes | filter : query">
            <td>{{ compte.local.nom }}</td>
            <td>{{ compte.local.prenom }}</td>
            <td>{{ compte.local.email }}</td>
            <td style="width:150px; text-align:center"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" ng-click="preSupprimer(compte)"><span class="glyphicon glyphicon-remove-circle"></span></button></td>   
            </tr>

        </tbody>
    </table>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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">Suppression</h4>
      </div>
      <div class="modal-body">
        Le compte sélectionné va être définitivement supprimé du système. Confirmez-vous cette suppression?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary" ng-click="deleteAccount()" data-dismiss="modal">Confirmer suppression</button>
      </div>
    </div>
  </div>
</div>

<!-- Footer -->
    <div ng:include="'/views/common/footer.html'"></div>
<!-- End Footer -->
<div class="loader" ng-show="loader"></div>


when the admin clicks on the button to delete the user account from the database, a bootstrap Modal fires and tells the Administrator wether to confirm deletion or not.

When confirm is clicked, deleteAccount() method is fired from adminPanel controller that is defined as follows:

AdminPanel.js :

  'use strict';
angular.module('App').controller('AdminPanelCtrl', function($scope, $http, $location, configuration) {
    $scope.headers = ['Nom', 'Prenom', 'Email', 'Action'];
    $scope.loader = false;

    $scope.listAccounts = function() {
        $http.get(configuration.URL_REQUEST + '/allAccounts')
            .success(function(data) {
                $scope.comptes = data;

            });
    };

    $scope.initial = function() {
        $http.get(configuration.URL_REQUEST + '/adminService').success(function(data, status) {
            $scope.admin = data;
        }).error(function() {
            $location.path('/logout');
        });

        $scope.listAccounts();

    };

    $scope.deleteAccount = function() {
        $scope.loader = true;
        $http.post(configuration.URL_REQUEST + '/deleteAccounts', $scope.compteAsupprimer)
            .success(function(data) {
                console.log('deleted' + data);
                $scope.listAccounts();
                $scope.loader = false;

            });
    };

    $scope.preSupprimer = function(account) {
        $scope.compteAsupprimer = account;
    }
});

And my dao file is the following :

  /* Delete userAccounts */

exports.supprimer = function(req, res) {

  var userAccount = new UserAccount(req.body);
  UserAccount.findById(userAccount._id, function(err, item) {
    if (err) {
      res.send({
        'result': 'error'
      });
    } else {
      UserAccount.remove(item, function() {
        res.send({
          'result': 'error'
        });
      });
    }
  });
};

and with routes into routes.js

So the problem starts when i click delete account button ON IE11, the account is deleted from mongoDB database, but is displayed in the grid. when i refresh the page the account is still there in the grid. But when i close IE11 and reopen the url from scratch it is not displayed and gives me the result i wanted.

So my question is : how can i perform this action without having the user closing his browser and reopening it, refreshing the list of accounts directly after deletion. Firefox , Chrome and safari support this feature, is there a problem with .send() function , i have already tried json() and jsonp() ..

Any feedbacks ?

Are you deleting the account from the proper scope/list so that the UI will be properly updated? — WiredPrairie, Mar 16 '14 at 15:19
@WiredPrairie I am clicking into the deleting button that is firing compteAsupprimer() method that is storing the current account into compteAsupprimer variable, after confirming the deletion , the deleteAccount function() is called and send by http POST $scope.compteAsupprimer to the DAO method supprimer(req,res) that performs a findByID and removes the account from databases. and on success ,the $scope.listAccounts() is recalled to list all the accounts from database. this works in Chrome and firefox and safari — badaboum, Mar 16 '14 at 15:31
Have you tried putting any breakpoints in the application to see if the list is being returned, etc. when you expect? — WiredPrairie, Mar 16 '14 at 15:33
@WiredPrairie do i have to do some operations on the scope to be properly updated ? — badaboum, Mar 16 '14 at 15:34

score 1 · Answer 1 · answered Mar 16 '14 at 17:49

1

This sounds like a jquery or ajax caching issue. If you're using jquery you can turn on the cache busting code with this at the start of your project:

$.ajaxSetup({ cache: false });

I don't know what the corresponding setup would be for angular, but I know that I've had trouble with IE caching ajax requests in the past.

answered Mar 16 '14 at 17:49

Will Shaver

12,471
5
49
64

1

http://stackoverflow.com/questions/4303829/how-to-prevent-a-jquery-ajax-request-from-caching-in-internet-explorer – Will Shaver Mar 16 '14 at 17:56

score 0 · Accepted Answer · answered Mar 17 '14 at 11:01

i have resolved the problem with Angularjs like this :

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);

Nodejs Angularjs Mongoose internet explorer 11 compatibility

2 Answers2