AngularJS disable double click

Question

I have a problem with a button which contacts server on click. If you do a double click (or any number of clicks for that matter) you will call the server that number of times.

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'ADMIN.CONTENT.DELIVERIES.BODY.CLOSE' | translate }}</button>
    <a class="btn btn-danger" ng-click="vm.markDelivered()" ng-dblclick="return" ng-disabled="flag">{{ 'MANAGER.CONTENT.DELIVERIES.BODY.DELETE_PANEL.CONFIRM' | translate }}</a>
</div>

I have tried with ng-disabled but for some reason it doesn't work, as it is saying that that element is not allowed there. I tried changing a to button, but that seems the same. ng-dblclick="return" does nothing also.

Hema · Accepted Answer · 2017-06-08 05:07:55Z

2

Even I had the same issue,And solved using this approach.

<div class="col-sm-4 form-group pull-right">
   <input type="submit" name="Submit" class="btn btn-primary"
    value="Submit" data-ng-disabled="myForm.$invalid"
    ng-click="myForm.$invalid=true;vm.markDelivered()" />
</div>

So on first click myForm.$invalid=true will be set and button will be disabled. SO you will not have multiple calls to your server side code.

answered Jun 8, 2017 at 5:07

Hema

9861 gold badge16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Norgul Over a year ago

Amazing, slick, simple and effective

Hema Over a year ago

Yeah that even disables your submit button if form validations are not proper.Glad it helped you..!!

joshsisley · Accepted Answer · 2017-06-07 19:34:01Z

1

So with Bootstrap buttons you won't be able to use ng-disabled. You would have to do it this way:

<div class="btn btn-default" ng-class="{'disabled': idDisabled}" ng-click="doSomething()">I'm a button!</div>

where you are setting the class disabled on the button. But this does not disable the action itself. So when the button is pressed you would need to check that isDisabled variable and if it is true just return and don't do the intended action.

So for example:

doSomething() {
   if (isDisabled) {
       return
   } else {
       // do your server call
       // when call is finished set isDisabled = false
   }
}

edited Jun 7, 2017 at 19:34

answered Jun 7, 2017 at 18:38

joshsisley

3102 silver badges11 bronze badges

8 Comments

Norgul Over a year ago

Have to use what? :)

CodeWarrior Over a year ago

He meant to say use <button> instead of <a>

Norgul Over a year ago

I tried that one also, but it is still telling me that it is not allowed there?

joshsisley Over a year ago

Oh I know what the issue is I think, I'll edit my answer above

joshsisley Over a year ago

Just updated my answer. It's because you are using Bootstrap and for some reason bootstrap doesn't work with ng-disabled

|

CodeWarrior · Accepted Answer · 2017-06-07 19:13:18Z

0

I see a couple of issues here.

First, change the anchor tag to a button.

Second, you seem to be using 'controller as' syntax. So, you are probably setting your flag in the vm. But, in your html, you are looking for the flag in the $scope. Change ng-disabled="flag" to ng-disabled="vm.flag"

Your final button line would look like this: <button class="btn btn-danger" ng-click="vm.markDelivered()" ng-dblclick="return" ng-disabled="vm.flag">{{ 'MANAGER.CONTENT.DELIVERIES.BODY.DELETE_PANEL.CONFIRM' | translate }}</button>

Adding a working plunker here demonstrating ng-disabled

edited Jun 7, 2017 at 19:13

answered Jun 7, 2017 at 19:00

CodeWarrior

2,8713 gold badges20 silver badges18 bronze badges

2 Comments

Norgul Over a year ago

it is telling me that Attribute ng-disabled is not allowed here? Do you know why is that?

CodeWarrior Over a year ago

I've added a working plunker demonstrating ng-disabled for a button. Note, it won't work for an <a>. You have to change it to a <button>

Hitmands · Accepted Answer · 2017-06-07 19:19:41Z

What about using a simple behaviour directive?

function oneTimeCallDirective($timeout) {
  var httpCallMock = (cb = () => 'ok') => $timeout(cb, 5000);

  return function oneTimeCallPostLink(iScope, iElement) {
    let busy = false;
    
    return iElement
      .on('click dblclick', function(event) {
        if(busy) {
          return event.preventDefault();
        }
        
        busy = true;
        
        console.info('Well, Calling.');        
        
        return httpCallMock()
          .then(() => {
            console.log('You Can Start Calling Again');
          })
          .finally(() => {
            busy = false;
          })
        ;
      })
    ;
  };
}

angular
  .module('test', [])
  .directive('oneTimeCall', oneTimeCallDirective)
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <button one-time-call>Click Here</button>
</section>

Collectives™ on Stack Overflow

AngularJS disable double click

4 Answers 4

2 Comments

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related