Disabling a button after a click event
Question
I have this piece of HTML code
<html>
<head></head>
<body>
<div ng-init="controller.onInit()" style="divContainer">
<div class="divLoading" style="vertical-align:middle" ng-show="controller.noOfLoadingInProgress > 0">
<span class="text"> Loading ...</span> <img src="../../Styles/Images/loading.gif" />
</div>
<br />
<h1>
Test</h1>
<div ui-view="wizardContent">
</div>
<!--<div class="clear">
</div>-->
<div>
<a class="buttonprev" id="btnPrevious" href="#" ng-show="controller.wizard.wizardIndex > 1"
ng-click="controller.wizard.previous()"><span>Previous </span></a>
<a class="buttonCancel"
id="btnCancel" href="#" ng-click="controller.wizard.cancel()"><span>Cancel </span>
</a>
<a class="buttonnext" id="btnNext" ng-disabled="controller.wizard.isNextInProgress"
href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex < controller.wizard.wizardItems.length-1)"
ng-click="controller.wizard.next()"><span>Next</span> </a>
<a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)"
ng-click="controller.wizard.finish()" ng-disabled ="controller.wizard.isFinished == 1"><span>Finish</span> </a>
</div>
</div>
</body>
</html>
And this piece of javascript code.
var WizardItem = function (manager, uiState) {
this.manager = manager;
this.uiState = uiState;
}
var Wizard = function ($state, onFinishCallback, wizardItems) {
var self = this;
self.onFinishCallback = onFinishCallback;
self.wizardItems = wizardItems;
self.wizardIndex = 0;
self.isNextInProgress = false;
self.isFinished = 0;
self.refresh = function () {
$state.go(wizardItems[self.wizardIndex].uiState);
};
self.next = function () {
if ((self.wizardIndex < wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
if (wizardItems[self.wizardIndex].manager.overrideNext == null) {
self.wizardIndex++;
$state.go(wizardItems[self.wizardIndex].uiState);
}
else {
self.isNextInProgress = true;
wizardItems[self.wizardIndex].manager.overrideNext(onFinishCallBack);
}
}
function onFinishCallBack(success) {
self.isNextInProgress = false;
if (success) {
self.wizardIndex++;
$state.go(wizardItems[self.wizardIndex].uiState);
self.isFinished = 1;
}
}
}
self.refreshWizardFrom = function (newWizardItems) {
self.wizardItems.splice(0);
for (var c = 0; c < newWizardItems.length; c++) {
self.wizardItems.push(newWizardItems[c]);
}
}
self.previous = function () {
if (self.wizardIndex > 1) {
self.wizardIndex--;
console.log($state.go(wizardItems[self.wizardIndex].uiState));
$state.go(wizardItems[self.wizardIndex].uiState);
}
};
self.cancel = function () {
if (confirm('Are you sure you want to cancel!')) {
$state.go('Home');
}
};
self.finish = function () {
self.isFinished = 1;
if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
//Ajmal Bug 410 - Variable flag isFinished set to 1 and being called on finish button click to disable it
self.isFinished = 1;
self.onFinishCallback();
self.isFinished = 1;
// alert('finish');
}
};
self.validateCurrentWizardItem = function () {
return wizardItems[self.wizardIndex].manager.validate();
};
self.initAllWizardItems = function () {
for (var c = 0; c < wizardItems.length; c++) {
wizardItems[c].manager.onInit();
}
}
self.registerValidations = function () {
for (var c = 0; c < wizardItems.length; c++) {
wizardItems[c].manager.registerValidations();
}
};
};
I would like to disable the finish button after clicking it once. I've tried something like that, but it still doesn't work in the javascript file, use a flag
self.isFinished = 0;
then set it to 1 in the finish function
self.isFinished = 1
then use ng-disabled in the html part of the code
ng-disabled = "controller.wizard.isFinished == 1"
Can someone figure out where may be the issue ?
Thanks
5 answers
solution1
0 2016-12-15 13:50:00
Try do self.wizadr.isFinished = 1; instead of self.isFinished = 1;
solution2
0 2016-12-15 14:01:31
You cannot disable tag. Use ng-disabled on button. Also add ng-app directive on body
solution3
0 2016-12-21 06:25:04
Indeed, disabling a tag did not make any sense, hence I decided to remove all the links from all the tags with this function.
In the self.finish function, added a call to a function (in bold )
self.finish = function () {
if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
self.onFinishCallback();
ConvertAnchorToSpan();
// alert('finish');
}
};
Outside of the Wizard, used that function in the same javascript file.
function ConvertAnchorToSpan() {
var $link = $('a');
var $span = $('<span>');
$link.after($span.html($link.html())).remove();
}
It now works and prevents multiple submissions. I removed all the isFinished flags in the javascript file as well as the ng-disabled in the html.
solution4
0 2016-12-21 06:43:24
As there is no disable property for anchor tag so you can use custom code for that. I used ng-class in place of ng-disabled It will add a class to your anchor tag and in css code is written for make this class elements disable.
<style>
.disabledOn {
cursor: not-allowed;
pointer-events: none;
color: grey;
}
</style>
HTML
<a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)"
ng-click="controller.wizard.finish()" ng-class="{disabledOn : controller.wizard.isFinished == 1}"><span>Finish</span> </a>
Best of luck :)
solution5
0 2016-12-21 07:22:49
ng-disabled can't be used for a tag. you can use this
HTML
<a ng-click="disabled()" class="btn" ng-class="{'disabled':disable}">Click Me</a>
JS
app.controller('MainCtrl', function($scope) {
var count=0;
$scope.disable=false;
$scope.disabled = function() {
if(count>0) { return false;}else{
alert("do someting else");
$scope.disable=true;
count++;
}
}
});
CSS
.disabled { cursor: default; opacity: .5; }
You can prevent click event by using this code after a first click.
For reference click this link
Hope it will be useful for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.