$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
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 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();
I need to show a message to update the app if any updated version is in the playstore.. How to get the code to Know that the app is updated or not?
Cordova Device Plugin
Using CordovaAppVersion Function and IonicPopUp
Firebase as the database where a status flag and version value has been set which can be moderated by the admin according to whatsoever newest version of the app is there on playstore.
document.addEventListener("deviceready", function () {
$cordovaAppVersion.getVersionNumber()
.then(function (version) {
var appVersion = version;
var starCount = firebase.database().ref("version");
starCount.once('value').then(function(snapshot) {
if(snapshot.val().ver!=appVersion&&snapshot.val().status===1)
{
versionerr(snapshot.val().ver,appVersion);
$ionicPlatform.registerBackButtonAction(function(e) {
//This will restrict the user to close the popup by pressing back key
e.preventDefault();
},401);
};
});
});
}, false);
versionerr = function(newv,oldv){
var myPopup = $ionicPopup.show({
title: "Update Available",
template: "A newer version("+n`enter code here`ewv+") of this app is available for download. Please update it from PlayStore ! ",
subTitle: 'current version : '+oldv,
scope: $scope,
buttons: [{
text: 'Exit',
type: 'button-dark',
onTap: function(e) {
ionic.Platform.exitApp();
}
}, {
text: '<b>Update</b>',
type: 'button-positive',
onTap: function(e) {
$window.open("https://play.google.com/store/apps/details?id=com.ionicframework.hostelcordova596017", '_system');
ionic.Platform.exitApp();
}
}]
});
}
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
});
I create a service to upload content.
it takes 4 argument
which folder to update
the content
set the form to disabled
clear form after submit
create: function(folderID, text, o, master) {
o.isDisabled = true;
ob = {
text: text,
media: 'Pending',
createdBy: $rootScope.AUTH.user.uid,
createdTime: Firebase.ServerValue.TIMESTAMP
};
_firebaseRef.files.child(folderID).push(ob, function(error) { $timeout(function() {
if (error) {
alert('Create file failed, please try again'); o.isDisabled = false;
} else {
o.isDisabled = false;
angular.copy(master, o);
};
});
});
},
So when in controller.
service.create(folderID, 'hello world', $scope.file, $scope.master);
My question
How can I omit the 3rd and 4th arguments?