I need help.
My code is in a login.
When the user click in login: I put a button disable to avoid that the user do click many times when the system is working, waiting for a answer
My code works fine, but I put a loader class when the user click in button login.
When the user put the password and is acepted, the system send us to the next view. This works fine, but...
The problem is:
When the user put a invalid pasword this.loadingActive = true; dont change.. the button remain with the spin active forever. I mean something happend that the variable loadingActive dont change to true
my html
<button class="btn btn-default btn-lg btn-block"
ng-class="{'disabled': login.loadingActive === false}"
ng-disabled="loginForm.$invalid || login.loadingActive === false"
ng-click="login.login()">
<span ng-hide="login.loadingActive" class="fa fa-refresh animacion-cargando"></span>
<span ng-hide="login.loadingActive">loading...</span>
<span ng-show="login.loadingActive">Login</span>
</button>
This is my js file
login() {
this.loadingActive = false;
this.error = '';
Meteor.loginWithPassword(this.credentials.email.toLowerCase(), this.credentials.password,
this.$bindToContext((err) => {
Meteor.setTimeout(() => {
if (err) {
this.loadingActive = true;
this.error = err;
} else {
this.loadingActive = true;
this.$state.go('app.pageOne');
}
}, 1000);
})
);
}
Why when I put a Meteor.setTimeout inside a Meteor.loginWithPassword happen this?
any ideas?
thanks!
I see you wrap the callback inside a this.$bindToContext. Not sure what it does but my guess is that it changes the context (this) the callback function so that this.loadingActive = true has no effect.
To fix this you could use a reference variable:
login() {
const self = this;
// ...
Meteor.loginWithPassword(
self.credentials.email.toLowerCase(),
self.credentials.password,
self.$bindToContext((err) => {
Meteor.setTimeout(() => {
// ...
self.loadingActive = true;
}, 1000);
}
));
}
Related
I am implementing an input button, which is visible only if function returns "True" from the back-end.
//Angular Method which returns either true or false, Which is working fine
//Show/Hide Printer
$scope.showHideFunc = function () {
if ($scope.Foo.id != null && $scope.Foo.id != '') {
$http.get(getTFfromDBURL + '/' + $scope.Foo.id).success(function
(data) {
$scope.showHide = data;
});
}
};
//Here is the code for button
<button id="btn-add-device" class="btn btn-info" ng-show="showHide" ng-click="showManagePrinter();loadDrawersForPrinter()">
<span class="glyphicon glyphicon-plus"></span> {{showHide}}
</button>
After all its weird at {{showHide}}, where its getting correct values, while its not affecting ng-show="showHide".
Appreciate thoughts.
Thank you.
I use AngularJSs editable-text to make things changeable. My question now would be it there is a possibility to disable the confirmation while data-e-ng-change is false?
<span editable-text="vm.foundedUser.username" data-e-ng-change="vm.checkUsername($data)" onbeforesave="vm.checkUsername($data)" onaftersave="vm.updateUser()">
{{vm.foundedUser.username || '--'}}
</span>
My checkUsername function looks like this:
function checkUsername(username) {
if(username.length < 5) {
return false;
}
validateService.checkUniqueUsername(username).success(function(response) {
return response.data;
}).error(function(e){
console.log('error in management.controller.js#checkUsername');
});
}
but it does not work, I guess because validateService.checkUniqueUsername is asynchron but I still dont know.
Try this:
<button type="submit" ng-disabled="vm.checkUsername($data)"> Submit </button>
I am working on a search page. If no result was returned form server, the no result message box will appear, and if the user still search for that word again, I want the fade out and fade in effect for the message box for user to know the page worked for their search. Everything work fine for this case, since I hide the message box before send the search request to server.
But when I add some validation to the page, the fade out fade in effect doesn't work when I try to hide and show message box for invalid search criteria continuously. At fist I thought I was because I change message state too close in the code. But the problem seems to be different.
When I try to change message from no result to invalid, the effect happens.
It sounds complicated so here is the summary:
Multiple no results messages -> works fine (did call to server)
Multiple invalid search criteria -> doesn't work (no server call)
From no results to invalid search criteria -> works fine (no server call and I don't know why the above doesn't work but this does)
From invalid search criteria to no result -> works fine (no doubts because there is a server call)
I think this might have something to to with the built in $apply function in angular.
Here is the code
var showNoResult = function() {
vm.showSearchResult = false; //result table
vm.showMsg2 = false; //invalid
vm.showMsg1 = true; //no result
vm.showMsg = true; //message box
};
var showInvalid = function() {
vm.showSearchResult = false;
vm.showMsg1 = false;
vm.showMsg2 = true;
vm.showMsg = true;
};
var hideMsg = function() {
vm.showMsg = false;
vm.showMsg1 = false;
vm.showMsg2 = false;
};
vm.sendData = function(page) {
hideMsg();
if(!isFormValid()) {
showInvalid(); //problem here
return;
}
// call to server
mapData(function(data) {
data.pagenum = page || 1;
searchService.searchEmployee(data).then(function(response) {
if (response.data[0] == 0) {
showNoResult();
return;
}
vm.users = response.data[1];
vm.totalItem = response.data[0];
vm.showSearchResult = true;
});
});
};
And this is the html:
<div id="message-box" class="panel panel-default ng-hide" ng-show="searchCtrl.showMsg">
<div class="panel-body">
<i class="fa fa-info" aria-hidden="true" id="no-result-icon"></i>
<p id="no-result-text" ng-show="searchCtrl.showMsg1">
<b>{{ searchCtrl.msg.msg1.msg1_1}}</b>
<br>
{{ searchCtrl.msg.msg1.msg1_2}}
</p>
<p id="invalid-form-text" ng-show="searchCtrl.showMsg2">
{{ searchCtrl.msg.msg2 }}
</p>
</div>
</div>
I have this button :
html:
<button nav-direction="back" class="button yy" ui-sref="app.result" ui-sref-active="currentNav" ng-click="navResult()">
Board
</button>
I would like it to display a popup if a certain condition is, else I would like it to go to another page.
I need to keep the benefit of the class in ui-sref-active to show that this is the current page.
controller.js
$scope.navResult = function (){
console.log(sessionService.get('computed'));
if (sessionService.get('computed')) {
$scope.go('app.result');
} else {
//popup to user to tap on a board
//$scope.go('app.compute');
var popupConfig = {
title: 'Beware! ;)',
template: 'Tap on a board below'
};
var popup = $ionicPopup.show(popupConfig);
ClosePopupService.register(popup);
}
}
$scope.go = function ( state ) {
// console.log("go has been launched with : "+ state)
$state.go( state );
};
Simple. You just use an ng-click method instead of a ui-sref, and go to the state from there.
<button nav-direction="back" ng-class="{'your-class':classCondition}" class="button yy" ng-click="navResult()">
Board
</button>
Then in your controller....
$scope.navResult = function(){
if(something){
$scope.classCondition = false;
//code to display popup here
} else {
$state.go('app.result')
}
}
You can pass any valid state into $state.go, so if you ever want to check for a condition and perform some logic BEFORE you redirect to another page, use it inside a $scope method instead of just using the straight ui-sref.
I have this login menu and its show on click but whenever i click its still open. Now i need to implement when user click anywhere on page that $scope.loginOpened = false...(to close that div with login menu)how i can do that? Any suggestion ?
This is an example of login menu:
$scope.toggleLoggedIn = function () {
$scope.loggedInOpened = !$scope.loggedInOpened;
$scope.languagesOpened = false;
$scope.loginOpened = false;
};
EDIT:
<div class="fade-show-hide" ng-show="loggedInOpened" ng-cloak>
#Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml")
</div>
you can use blur()
example
<input type="text" ng-enter="doBlur($event)">
script
$scope.doBlur = function($event){
var target = $event.target;
if (!$scope.loginOpened){
// do more here, like blur or other things
$(target).blur(function() {
//do what you want here
});
}
}
If you want to hide the div you can follow the below process.
<div class="fade-show-hide" ng-hide="loggedInOpened" ng-cloak>
#Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml")
</div>
<button type="button" id="btn" ng-click="toggleLoggedIn()">Hide div</button>
$scope.toggleLoggedIn = function () {
$scope.loggedInOpened = !$scope.loggedInOpened;
$scope.languagesOpened = false;
$scope.loginOpened = true;
};