Prevent a button from being clicked twice in angularjs

Question

I am working in angularjs and am new to it, I have made an app using this.

There are a few pages in my app, now my problem is i am having two buttons which navigate to other pages, but my issue is when i click on a button (span), it opens the same page twice.

Can anyone please help me how to solve this? My code is as below:

javascript

  $scope.foo = function() {
        if ($scope.filterflg !== "1" ) {
            $scope.filterflg = "1";
             $scope.disabled = true;


            gallery.pushPage("filter.html", {
                params: FkCategory
            });

            $timeout(function() {
                console.log("====timeout occured===");
                $scope.filterflg = "0";
                  $scope.disabled = false;
            }, 3000);
        }
    };

html

<ons-button  id="test1" class="toolbar-button--quiet navigation-bar__line-height"  ng-click="isProcessing=true;foo()" ng-model ="filterflg"
         style="border: none; padding: 0 5px 0 0; margin-right:7px ;">
            <i class="ion-android-options" style="font-size:24px; color: #FFFFFF;"></i>
        </ons-button>

I have wasted 10 days on this issue, hope some buddy will help me to save my job..! :(

This probably may help you. http://stackoverflow.com/questions/29984581/how-do-you-disable-the-submit-button-after-a-single-click-to-prevent-multiple-su — Azmat Karim Khan, Nov 19 '15 at 06:56
You can use the "ng-disabled". Just make a scope function with for example ng-disabled="isDisabled" — Mr.Turtle, Nov 19 '15 at 06:58
Is your function `foo()` is calling twice? Why did you use `timer`? — Abhilash Augustine, Nov 19 '15 at 07:01
Timer is not a good way to further enable the button. Your page may take more time to load even more than 3000 mili seconds — Partha Sarathi Ghosh, Nov 19 '15 at 07:03
@AbhilashPA - i want to prevent this button to navigate to page twice — JIGAR, Nov 19 '15 at 08:24
@OleReidarHolm - i have used with no luck..can you please tell what changes should i make? — JIGAR, Nov 19 '15 at 08:25
@FireCandy for that you need to update your question with those details. What is gallery? how is pushPage is defined? — Partha Sarathi Ghosh, Nov 19 '15 at 08:29

Rabi · Answer 1 · 2015-11-19T09:04:02.653

3

ng-disabled doesn't work on span. It only works for input or button types.

you have two options -

convert the span to a button element

use a variable like $scope.isProcessing to wrap the foo() function.

$scope.foo = function() {

if (!$scope.isProcessing) {     
    //...       
    $timeout(function() {
         console.log("====timeout occured===");
         $scope.filterflg = "0";
         $scope.disabled = false;
         $scope.isProcessing = false;        
    }, 3000);
 }

};

html

<span ng-click="isProcessing=true;foo()"></span>

edited Nov 19 '15 at 09:04

answered Nov 19 '15 at 07:01

Rabi

2,210
17
18

And what changes have to made in html? – JIGAR Nov 19 '15 at 08:51
Please see the updated question..which is still not working..:( – JIGAR Nov 19 '15 at 09:15
did you add the if (!$scope.isProcessing) check ? – Rabi Nov 19 '15 at 09:18

Shailendra Sharma · Accepted Answer · 2015-11-19T08:54:53.690

1

convert the span to a button element and disable that button without $timeout just after first click

 $scope.foo = function() {
        just simply 
        $scope.disabled = false;
        // Your other code 


 };

or use a flag to check page is already open or not will solve your problem

 $scope.isFilteropen = false;

 $scope.foo = function() {
     if ($scope.isFilteropen == false) {
         $scope.isFilteropen = true;
        // your other code 
     }
 };

edited Nov 19 '15 at 08:54

answered Nov 19 '15 at 07:01

Shailendra Sharma

6,976
2
28
48

And what changes in my html? – JIGAR Nov 19 '15 at 09:06
to – Shailendra Sharma Nov 19 '15 at 09:07
could you create a fiddle with your problem , my solution works fine check it here http://jsfiddle.net/HB7LU/20051/ – Shailendra Sharma Nov 19 '15 at 09:26
Hello brother,you did what i exactly want but can we re enable when we come back to that page from page stack as its an app – JIGAR Nov 19 '15 at 09:42
yes i know button re enable automatically when we back on page, because when we back on page controller also recalled and $scope.disabled = false; make button re enable – Shailendra Sharma Nov 19 '15 at 09:50
actually i am using onsen ui for this app,and which maintaing a page stack in anvigator,so when we come back no controller is calling..got my point? – JIGAR Nov 19 '15 at 10:10
Than simple timeout work look at this http://jsfiddle.net/HB7LU/20054/ but i am not aware of onsen ui that's why i ask you for a fiddle – Shailendra Sharma Nov 19 '15 at 10:25
thank you sharma ji ... :) can you please help me on one more question,its also weird..! – JIGAR Nov 19 '15 at 11:24
Have you ever used Onsen ui?if yes then you know it provide a default back button and its navigator maintains a page stack,Now my problem is when i click more than one time it says "pagestack is empty" and my app stopped working..it only happens when i click very fast and twice on back button.can you suggest any solution for this. – JIGAR Nov 19 '15 at 12:13

score 0 · Answer 3 · answered Nov 19 '15 at 08:29

0

Try this one,

<span class="toolbar-button--quiet navigation-bar__line-height" ng-disabled="disabled" ng-click="disabled=true;foo();disabled=false;" ng-model ="filterflg"> </span>

And remove your timer from the function Foo().

answered Nov 19 '15 at 08:29

Abhilash Augustine

4,128
1
24
24

hello used this.still it goes two time next page..:(..please brother..help me..please see my update question – JIGAR Nov 19 '15 at 08:44
@firecandy, did you debug your function to know what is the reason to load your page twice? – Abhilash Augustine Nov 19 '15 at 09:40

Prevent a button from being clicked twice in angularjs

3 Answers3