CODEWITHSUNDEEP
javascriptjquery
Abdulrhman Alsri
Abdulrhman Alsri

Reputation: 1727

FadeOut doesn't allow appearance of error alert anymore

I use the following HTML code:

<div style="width:235px; " id="ErrorAlert" ng-hide="ErrorAlert">
     <alert type="danger">User's email is duplicated!</alert>
</div>

JS to set alert timeout is,

 $scope.ErrorAlert = false;
 setTimeout(function () {
      $('#ErrorAlert').fadeOut('slow');
 }, 2000);   //2 second

The problem is that after the time passes and alert is disappeared, If I call the alert again, it does not appear. Maybe because time out was set and it has already expired.

How can I make the alert reappear even if time out has already passed on a previous event.

Upvotes: 3

Views: 95

Answers (2)

Jared Farrish
Jared Farrish

Reputation: 49208

I was able to get it to re-toggle using this:

<body ng-controller="MainCtrl" ng-click="">
  <p>Hello {{name}}! <button type='button' id='ShowAlert'>Show Alert</button></p>
  <div style="width: 235px;" id="ErrorAlert" ng-show="ErrorAlert">
    <alert type="danger">User's email is duplicated!</alert>
  </div>
</body>

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.ErrorAlert = false;

  $('#ShowAlert').on('click', function(){
    $scope.ErrorAlert = true;

    setTimeout(function(){
      $scope.$apply(function(){
        $scope.ErrorAlert = false;
      });
    }, 2500);
  });

});

http://plnkr.co/edit/qEUTmgfYUhQYMEdRAG3z?p=preview

So, use your $scope.ErrorAlert to toggle the view, but make sure and trigger the change in $scope.ErrorAlert by telling Angular it's happened.

Here's what I assume is an Angular-y way of doing a dismiss button:

<body ng-controller="MainCtrl" ng-click="">
  <p>
    Hello {{name}}! 
    <button type='button' id='ShowAlert' ng-click="ErrorAlert = !ErrorAlert">Show Alert</button>
  </p>
  <div style="width: 235px;" id="ErrorAlert" ng-show="ErrorAlert">
    <alert type="danger">User's email is duplicated!</alert>
    <button type='X' ng-click="ErrorAlert = false">Close</button>
  </div>
</body>

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.ErrorAlert = false;

  $('#ShowAlert').on('click', function(){
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.ErrorAlert = false;
      });
    }, 2500);
  });

});

http://plnkr.co/edit/OEdr2OWPV11hVnYSVRMc?p=preview

Upvotes: 1

sebastienbarbier
sebastienbarbier

Reputation: 6832

Your mistake is that ng-hide will use a class (class="ng-hide") to hide your element whereas jQuery.fadeOut() will write an inline style attribute with display: none.

Your browser will always give priority to inline style so Angular will remove this class but object will stay hidden because of inline style.

When you set $scope.ErrorAlert = true; also use jQuery to remove inline styles or call .show() method.

One solution :

$scope.ErrorAlert = false;
 setTimeout(function () {
      $('#ErrorAlert').fadeOut('slow', function () {
          $scope.ErrorAlert = true;
          // $('#ErrorAlert').show();
          $('#ErrorAlert').removeAttr('styles');
      });
 }, 2000);   //2 second

May be instead of $('#ErrorAlert').show(); try using $('#ErrorAlert').removeAttr('styles') ... because your object will probably not hide since he has display: block; inline and ng-hide class to hide ... :D

Upvotes: 2

Related Questions