angularjs disable button on $http/$q calls

Question

following the DRY principal, i want to write a button directive which keeps button disabled for the duration of $http class.

I want to do this so as to forbid user from clicking the buttons multiple times, but i am not able to think on how to get function promise status inside a directive, given that the function resides on $scope

the scenario is very generic, buttons ng-click does call a function which in turn makes $http calls. on user click : button should get disabled and should be enabled only after the $http call is resolved, either success or failure.

Possible duplicate of Preventing / dealing with double button clicks in angular — Mati
– Mati, Commented Dec 4, 2016 at 15:09

Artyom Pranovich · Accepted Answer · 2017-05-31 13:57:55Z

38

Why not just make it easier.

<button ng-click="save()" ng-disabled="isProcessing">Save</button>


$scope.save = function(){
  $scope.isProcessing = true;
  $http.post('Api/Controller/Save', data).success(
    $scope.isProcessing = false;
  );
}

Sure it's the case if you need this logic in very few places across your app.

If you have such logic repeating many times (and if you are not lazy :) ), so in order to follow SOLID principles it definetely better to wrap this functionality into directive (check out other answers for this question to see examples of such directive).

edited May 31, 2017 at 13:57

answered Mar 28, 2014 at 10:37

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

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

4 Comments

harishr Over a year ago

i am currently doing what u suggested, but if then i have to manage one Boolean per button.. creating a directive, will handle that automatically throughout the project

Jens Alenius Over a year ago

I recommend this way. Its the only way if you want it to be flexible. listening to requests with a interceptor wont include the client side stuff you might want to do before and after a request. I seen some click directives but they will all need a returned promise, which will affect the controller code

Robert Koritnik Over a year ago

This is so no DRY, because you have to take care of async state for each individual button. Accepted answer is a much better solution. This one is simple enough for simple projects but when things become more complex this become a heavy burden.

Hristo Enev Over a year ago

In this case the button could be clicked more than once before the digest cycle disables it.

Michal Charemza · Accepted Answer · 2014-03-28 18:21:44Z

29

Although I would be careful of over-engineering, a way to do this would be by using a custom directive. This directive

Accepts an option, passed by attribute, of a function in the scope that must return a promise
On click of the button, calls this function, and disables the button
On finally of the promise, it re-enables the button

-

app.directive('clickAndDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

This can be used on a button as follows:

<button click-and-disable="functionThatReturnsPromise()">Click me</button>

You can see this in action at http://plnkr.co/edit/YsDVTlQ8TUxbKAEYNw7L?p=preview , where the function that returns the promise is:

$scope.functionThatReturnsPromise = function() {
  return $timeout(angular.noop, 1000);
}

But you could replace $timeout with a call to $http, or a function from any service that returns a promise.

answered Mar 28, 2014 at 18:21

Michal Charemza

27.3k15 gold badges114 silver badges191 bronze badges

6 Comments

Javatar Over a year ago

The problem with this is, I removed the timeout function, but I can't get it to perform default action after click (for example, submit form once the button is clicked), it just disables button. Is that possible to make so form is also being submitted?

Chris Nava Over a year ago

I had problems with this solution. When the HTTP call returned an error code, the button was not reenabled. @codef0rmer solution below worked better in this case.

Jerry Over a year ago

I made a slight modification to not have to use an isolate scope. This allowed me use translate on the same element. scope.$eval(attrs.clickAndDisable).finally(...) and remove the scope property.

Ivan Pandžić Over a year ago

Imagine that on click of button we want to fetch some data from server - This will call our function from directive, not from view which is IMO bad practice. Anyway, nice idea ;)

Robert Koritnik Over a year ago

This is very elegant. It could also utilize an additional attribute to set a temporary button label while button is inactive like working... or similar.

|

Alvin Thompson · Accepted Answer · 2016-03-02 18:21:43Z

I like @codef0rmer 's solution because it is centralized--that is there's no additional code needed for each HTTP request, and you just need to check the global progress flag in your HTML. However, using transformResponse to determine when the request has completed is unreliable because the server may not return anything; in that case the handler isn't called and progress is never set back to false. Also, as written that answer doesn't account for multiple simultaneous requests (progress may return false before all requests have completed).

I've come up a similar solution which uses interceptors to address these issues. You can put it in your Angular app's config function:

.config(function ($httpProvider) {
    $httpProvider.interceptors.push(function($q, $rootScope) {
        var numberOfHttpRequests = 0;
        return {
            request: function (config) {
                numberOfHttpRequests += 1;
                $rootScope.waitingForHttp = true;
                return config;
            },
            requestError: function (error) {
                numberOfHttpRequests -= 1;
                $rootScope.waitingForHttp = (numberOfHttpRequests !== 0);
                return $q.reject(error);
            },
            response: function (response) {
                numberOfHttpRequests -= 1;
                $rootScope.waitingForHttp = (numberOfHttpRequests !== 0);
                return response;
            },
            responseError: function (error) {
                numberOfHttpRequests -= 1;
                $rootScope.waitingForHttp = (numberOfHttpRequests !== 0);
                return $q.reject(error);
            }
        };
    });
})

Now you can just use the waitingForHttp to disable buttons (or show a "busy" page). Using interceptors gives an added bonus that now you can use the error functions to log all HTTP errors in one place if you want.

codef0rmer · Accepted Answer · 2014-03-28 12:47:57Z

7

You can use this in the run block. This will make sure all the buttons will be disabled whenever there is an active XHR call.

myApp.run(function($rootScope, $http) {
    $http.defaults.transformRequest.push(function (data) {
        $rootScope.progress = true;
        return data;
    });
    $http.defaults.transformResponse.push(function(data){ 
        $rootScope.progress = false;
        return data;
    }) 
});

And then use the same model anywhere you want.

 <button ng-click="save()" ng-disabled="progress">Save</button>

answered Mar 28, 2014 at 12:47

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

2 Comments

Alvin Thompson Over a year ago

I like this approach, but I recommend modifying your answer to account for the possibility of multiple simultaneous requests. Without this, when the first request returns (but before any other requests return) progress will be incorrectly set to false. I worked around this by adding a counter numberOfHttpRequests which is incremented/decremented in the functions; only set progress to false when numberOfHttpRequests is 0.

Alvin Thompson Over a year ago

On further testing, there seem to be some responses which do not go through the "transformResponse" handler (errors maybe, and those services that don't return anything?), so the progress flag may not ever be reset. I've come up with a similar solution which instead uses interceptors. Please see that answer.

Mike Lunn · Accepted Answer · 2015-08-05 13:10:30Z

4

You can create a directive that could be used on the element you want disabled.

 var loadingDisabled = function ($http) {
    return {
      restrict: "a",
      link: function (scope, elem, attr) {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                }
                scope.$watch(scope.isLoading, function(v) {
                    if (v) {
                        elem.disabled = true;
                    } else {
                        elem.disabled = false;
                    }
                });

            }

    };
  };

answered Aug 5, 2015 at 13:10

Mike Lunn

2,5003 gold badges23 silver badges27 bronze badges

Comments

brendan · Accepted Answer · 2014-11-13 23:07:27Z

3

You could also consider setting a flag, and using the html tag fieldset and ng-disabled. Then you can control how long the yourDisableFlag is true based on $http calls, a $timeout, etc.

<form name="myForm">
  <fieldset ng-disabled="yourDisableFlag">
    <button id="b1" ng-click="b1function">B1</button>
    <button id="b2" ng-click="b2function">B2</button>
    <button id="b3" ng-click="b3function">B3</button>
  </fieldset>
</form>

answered Nov 13, 2014 at 23:07

brendan

1,0079 silver badges9 bronze badges

2 Comments

harishr Over a year ago

ofcourse I can do that, but as stated in question, i am looking for generic way.

brendan Over a year ago

Right you are! I thought it might still be helpful for groups of buttons, but you wouldn't want to have a separate fieldset for each button.

Eugene Myasyshchev · Accepted Answer · 2015-11-19 10:44:52Z

I was trying different approaches including directives and came up with a simple filter that transforms promise to status object. You can then use the status object to disable related button (or anything else) as well as show some progress messages. So the filter code is:

function promiseStatus() {
  return function(promise) {
    var status = {
      inProgress: true,
      resolved: false,
      rejected: false
    };
    promise
      .then(function() {
        status.resolved = true;
      })
      .catch(function() {
        status.rejected = true;
      })
      .finally(function() {
        status.inProgress = false;
      });
    return status;
  }
}

Suppose you have controller like this

function SubmitController($http) {
  var vm = this;

  vm.submitData = function() {
    return $http.post('....')
      .then(function() {
        //Doing something usefull
      });
  }
}

Then the template will be like this

<button 
  ng-disabled='status.inProgress' 
  ng-click='status = (vm.submitData() | promiseStatus)'>Submit</button>
<span class='ng-hide' ng-show='status.inProgress'>Submitting...</span>
<span class='ng-hide' ng-show='status.resolved'>Submitted succsssfully!</span>
<span class='ng-hide' ng-show='status.rejected'>Failed to submit!</span>

Full source code is on a Github

Athafoud · Accepted Answer · 2016-09-13 13:48:00Z

This directive will disable the button until the save/promises is not fulfilled. single-click must return promises otherwise it will not disable the button.

In case there is no promises but still want to disable the button, then it is recommended to write own logic of disabling the button

app.directive('singleClick', function ($parse) {
    return {
        compile: function ($element, attr) {
            var handler = $parse(attr.singleClick);
            return function (scope, element, attr) {
                element.on('click', function (event) {
                    scope.$apply(function () {
                        var promise = handler(scope, { $event: event }); /// calls and execute the function specified in attrs.
                        if (promise && angular.isFunction(promise.finally)) { /// will execute only if it returns any kind of promises.
                            element.attr('disabled', true);
                            promise.finally(function () {
                                element.attr('disabled', false);
                            });
                        }
                    });
                });
            };
        }
    };
});

adasq · Accepted Answer · 2015-02-22 20:37:14Z

0

I've prepared directive on plnkr which overrides default ngClick directive

<button ng-click="loadData($notify)">submit</button>

and controller:

$scope.loadData = function($notify) {
    $timeout(function() {
      $notify && $notify();
    }, 1000);
  }

answered Feb 22, 2015 at 20:37

adasq

1068 bronze badges

2 Comments

harishr Over a year ago

not all ng-click does return the promises?? how to handle that part in this case...?? your assumption that all ng-clicks must return promises does not hold true.. and in that case buttons remain disabled forever

adasq Over a year ago

hi @entre, i'm not sure what promises you think about? i think the concept of passing custom argument to ng-click method ($notify in this case) is pretty flexible and could give you more control over managing button state.

Collectives™ on Stack Overflow

angularjs disable button on $http/$q calls

9 Answers 9

4 Comments

6 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

6 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related