When a user triggers a specific action on my form by clicking a button, I want all controls to be disabled until the server response is received. This way, the user cannot modify any values while the action is being processed. Once the server responds, the form should be re-enabled.
However, the issue lies in my code implementation:
$scope.restartNode = function () {
$scope.isBusy = true;
$scope.disableControls = true;
SEApplicationService.restartNode();
$scope.isBusy = false;
$scope.disableControls = false;
}
The restartNode function makes a blocking call to a Web API method, but for some reason, the controls remain enabled. Interestingly, if I remove the line that re-enables the controls, they are properly greyed out as expected. What could be causing this behavior?
The blocking call is as follows:
appService.restartNode = function () {
return $http.post("/SEFlex/SEFlexAdmin/RestartNode", {
isPrimary: appService.primarySelected
}).success(function (response, status, headers, config) {
appService.refreshData();
}).error(function (reason, status, headers, config) {
console.log(reason);
});
}
Added an edit to include the refreshData() function:
appService.refreshData = function () {
return $http.post("/SEFlex/SEFlexAdmin/GetNodesStatus")
.success(function (response, status, headers, config) {
if (response) {
angular.forEach(response.data, function(value) {
if (value.isPrimary) {
appService.ServiceStatus.PrimaryStatus = value.status;
appService.ServiceStatus.PrimaryPools = value.poolCount;
appService.ServiceStatus.PrimaryContainers = value.containerCount;
appService.ServiceStatus.PrimaryNodes = value.nodeCount;
} else {
appService.ServiceStatus.SecondaryStatus = value.status;
appService.ServiceStatus.SecondaryPools = value.poolCount;
appService.ServiceStatus.SecondaryContainers = value.containerCount;
appService.ServiceStatus.SecondaryNodes = value.nodeCount;
}
});
}
})
.error(function (reason, status, headers, config) {
console.log(reason);
});
}