I have an IONIC popup, See image below in the link.
I have an issue when i click on the buttons Arrange Coupon, It redirect me to the next screen. It is fine.But the popup doesn't hide. Please help me.
Thanks.
http://awesomescreenshot.com/0e55lzsl39
var myPopup;
$scope.showPopup = function() {
myPopup = $ionicPopup.show({
template: '<a class="button button-block button-energized" href="#/redeem">Arrange Coupon</a> <a class="button button-block button-balanced">Add Coupon</a> ',
title: 'Coupon Management',
buttons: [{
text: '<b>OK</b>',
type: 'button button-small button-positive',
onTap: function(e) {
}
}, ]
});
myPopup.then(function(res) {
if (res) {
console.log(res);
}
else{
alert('here');
}
});
};
Looks like you forgot to add the image. However, The Ionic Popup service allows programmatically creating, showing and closing popup.
If you have a popup defined like this,
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
}
]
});
You can close it like this
myPopup.close();
Related
I am writing an app with Ionic 1.3 and Angular 1.5.
I am using the $ionicPopup service in my app.
$ionicPopup.confirm({
title: getShowPopupTitle(),
buttons: [{
text: 'OK',
type: 'button-positive',
onTap: function () {
processData();
}
}, {
text: 'CANCEL',
type: 'button-default',
onTap: function () {
}
}]
});
I am having digest loop and view updating issues with my app so this is what I want to try:
After the user clicks OK and the popup is gone from the view and the scope then I want to call the remaining async processes.
How can I accomplish this?
Have you tried using the .then callback?
var popup = $ionicPopup.confirm({
title: getShowPopupTitle(),
buttons: [{
text: 'OK',
type: 'button-positive',
onTap: function () {
processData();
}
}, {
text: 'CANCEL',
type: 'button-default',
onTap: function () {
}
}]
});
popup.then(function(data){
console.log(data);
})
If you need more time after the popup closes, then you can use the $timeout service.
popup.then(function(data){
popup.close();
$timeout(function(){
// do your thing here...
});
});
i had completed ionic project. i would like to change lanaguages in this code. project title, place holder , button it had changed but popup was doesn't changed. i used this code in controller and language change file.
farmer-ctrl.js :
function showPopup () {
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.category">',
title: '{{"farmers_message" | translate}}', //'Enter CoconutType',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>{{"save_message" | translate}}</b>',
type: 'button-positive',
onTap: function (e) {
if (!$scope.data.category) {
//don't allow the user to close unless he enters producttype
e.preventDefault();
} else {
$log.log('yes clicked: ', $scope.data.category);
addProductType();
return $scope.data.category;
}
}
},
]
});
myPopup.then(function (res) {
$log.log('Tapped!', res);
});
}
i had founded by adding translate.instant
function showPopup () {
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.category">',
// title: 'Enter CoconutType',
title: $translate.instant('{{"farmers_message" | translate}}'),
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: $translate.instant('{{"save_message" | translate}}'),
type: 'button-positive',
onTap: function (e) {
if (!$scope.data.category) {
//don't allow the user to close unless he enters producttype
e.preventDefault();
} else {
$log.log('yes clicked: ', $scope.data.category);
addProductType();
return $scope.data.category;
}
}
},
]
});
myPopup.then(function (res) {
$log.log('Tapped!', res);
});
}
To add localization in popup you need something like this:
var alertPopup = $ionicPopup.alert({
title: $translate.instant('networkerror'),
template: '<div><p translate="onlinemessagepois"></p></div>'
});
where networkerror and onlinemessagepois exist in your local js files. (Example: "networkerror":"sometext","onlinemessagepois":"someothertext" )
Note: you have to inject $translate in your controller.
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
connectionerror($ionicPopup)
})
// display error msg and close the app.
function connectionerror($ionicPopup){
$ionicPopup.alert({
title: "Network Error",
content: "No internet connection",
okText: 'Retry',
})
.then(function(result) {
//do something
});
}
What I would like to do is that when I click on 'retry' for it to check if there is internet connection again. If there is, to load the page normally, if no internet connection to keep the popup open. Also, how can I apply this to all the page?
Taken from Ionic Docs , you could use something like :
var myPopup = $ionicPopup.show({
template: '--yourTemplate--',
title: 'Network Error',
subTitle: 'No internet connection'
buttons: [
{ text: 'Cancel' },
{
text: '<b>Retry</b>',
type: 'button-positive',
onTap: function(e) {
if (!$rootScope.checkConnection() ) {
e.preventDefault();
} else {
// Juste go wherever you want with $state.go(), or reload the current page;
}
}
}
]
});
Just write the $rootScope.checkConnection() function to check network status
I need a dynamic popup where images change its opacity when clicked. It works perfectly, but only when the popup is out of a function. I need it inside a function.
This is my controller:
$scope.imgIds = ['0', '1', '2', '3', '4', '5'];
$scope.selectedImg = '-1';
$scope.itemClicked = function(index){
console.log(index);
$scope.selectedImg = index;
}
/*$ionicPopup.prompt({
title: 'Como foi seu treino?',
scope: $scope,
templateUrl: 'templates/icons.html'
});*/
//Envia Mensagem do Treino
$scope.sendMessage = function(tempo,id_serie) {
$ionicPopup.prompt({
title: 'Como foi seu treino?',
scope: $scope,
templateUrl: 'templates/icons.html'
}).then(function(res) {
$http({
url: $localStorage.url+'/serie/mensagem',
method: 'POST',
data: {id_serie : id_serie, mensagem :res, tempo: tempo, datahora: $scope.getData()},
headers : {'Content-Type':'application/json; charset=UTF-8'}
});
});
}
//Finaliza Treino
$scope.finalizar = function() {
document.getElementById('timer').getElementsByTagName('timer')[0].stop();
document.getElementById('play').className = 'button icon button-balanced button-block ion-play col';
var tempo = document.getElementById('timer').getElementsByTagName('timer')[0].innerText;
var confirmPopup = $ionicPopup.confirm({
title: 'Atenção',
template: 'Tempo: '+tempo+'<br>Finalizar Treino?',
buttons: [
{ text: 'Cancelar', onTap: function(e) { return false; }},
{ text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
document.getElementById('timer').getElementsByTagName('timer')[0].start();
document.getElementById('timer').getElementsByTagName('timer')[0].stop();
$state.go('tab.series', {});
$scope.sendMessage(tempo,$scope.id_serie);
}
},
]
});
}
This is icons.html:
<style>
.selected {opacity:1;margin:auto;}
.unselected {opacity:0.5;margin:auto;}
</style>
<div class='row'>
<img ng-repeat="imgId in imgIds" src="img/{{imgId}}.png" width="30" height="30"
ng-class="{'selected':{{imgId}}==selectedImg,'unselected':{{imgId}}!=selectedImg}" ng-click="itemClicked(imgId)"/>
</div>
Algum Comentário?<br>
<input type="text"/>
There is no error on console. But the images don't change css, the popup gets locked and the buttons doesn't do nothing.
I got it.
The problem is I put $state.go('tab.series'); before call the popup, so the scope were different.
Am new to both angular and ionic. I have a popup in my page where i show user a input field to enter the OTP and a submit button. When i click on the submit button, I make an Ajax call to check if the OTP is valid.
But am not able to close the popup with .close method. Please help
var OTPPopup = $ionicPopup.show({
title: 'OTP VERIFICATION',
templateUrl: 'templates/login/otp.html',
scope: $scope,
buttons : [{
text: 'Confirm OTP',
type: 'button-assertive',
onTap : function(e) {
e.preventDefault();
var validateResponse = validateOTP();
validateResponse.then(function(response){
console.log('success', response);
return response;
});
}
}]
}).then(function(result){
console.log('Tapped', result);
OTPPopup.close();
});
And below is the function validateOTP
function validateOTP() {
var requestObj = {
authentication: {
email_id: $scope.loginForm.email,
security_code: $scope.OTP
}
};
return $q(function(resolve, reject) {
activateUser(requestObj, function(response){
if(response.error == null && response.data.isSuccess) {
console.log('validate correct');
resolve(response);
}
}, function(response){
return 'error';
});
});
}
activateUser is my service which makes the ajax call. Please let me know how can i acheive this.
console.log('success', response) is being printed inside the .then but after returning something from the onTap , the promise of the popup is not being called.
Ended up solving it myself.
This solution would work only if you have exactly one ionicPopup on your page. I just wrote this line of code to do the trick
$ionicPopup._popupStack[0].responseDeferred.resolve();
This automatically closes the popup. The whole code is more simpler now with normal Ajax without any q promises.
var OTPPopup = $ionicPopup.show({
title: 'OTP VERIFICATION',
templateUrl: 'templates/login/otp.html',
scope: $scope,
buttons : [{
text: 'Confirm OTP',
type: 'button-assertive',
onTap : function(e) {
// e.preventDefault() will stop the popup from closing when tapped.
e.preventDefault();
validateOTP();
}
}]
});
and in the next function
function validateOTP() {
var requestObj = {
authentication: {
email_id: $scope.loginForm.email,
security_code: $scope.loginForm.OTP
}
};
activateUser(requestObj, function(response){
if(response.error == null && response.data.isSuccess) {
localStorage.setLocalstorage = response.data.user[0];
$ionicPopup._popupStack[0].responseDeferred.resolve();
$state.go('dashboard.classified');
}
}, function(response){
});
}
you don't need call e.preventDefault();
you just only return the validateOTP promise
ionicPopup will waiting the promise then close popup
var OTPPopup = $ionicPopup.show({
title: 'OTP VERIFICATION',
template: 'templates/login/otp.html',
scope: $scope,
buttons : [{
text: 'Confirm OTP',
type: 'button-assertive',
onTap : function() {
return validateOTP();
}
}]
}).then(function(result){
console.log('closed', result); // result is the activateUser resolve response
});