Show a confirmation alert before app close
9:13 PMIf you want to add a confirmation alert before app close, modify your app.js as below :
Type 1:(show a alert message)
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
function showConfirm() {
var confirmPopup = $ionicPopup.show({
title : 'Exit AppName?',
template : 'Are you sure you want to exit AppName?',
buttons : [{
text : 'Cancel',
type : 'button-royal button-outline',
}, {
text : 'Ok',
type : 'button-royal',
onTap : function() {
ionic.Platform.exitApp();
}
}]
});
};
// Is there a page to go back to?
if ($ionicHistory.backView()) {
// Go back in history
$ionicHistory.backView().go();
} else {
// This is the last page: Show confirmation popup
showConfirm();
}
return false;
}, 101);
Type 2:(show a toast message 'Press again to exit' before exist the app)
For impliment this, you must have to add 'ng-cordova.js' and have to install ngCordova Toast Plugin
var countTimerForCloseApp = false;
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
function showConfirm() {
if (countTimerForCloseApp) {
ionic.Platform.exitApp();
} else {
countTimerForCloseApp = true;
showToastMsg($cordovaToast, 'Press again to exit.');
$timeout(function() {
countTimerForCloseApp = false;
}, 2000);
}
};
// Is there a page to go back to?
if ($ionicHistory.backView()) {
// Go back in history
$ionicHistory.backView().go();
} else {
// This is the last page: Show confirmation popup
showConfirm();
}
return false;
}, 101);
I'll always recommend the second option(the
14 comments
.run(function($ionicPlatform, $ionicPopup) {
ReplyDelete$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
function showConfirm() {
var confirmPopup = $ionicPopup.show({
title : 'Exit AppName?',
template : 'Are you sure you want to exit AppName?',
buttons : [{
text : 'Cancel',
type : 'button-royal button-outline',
}, {
text : 'Ok',
type : 'button-royal',
onTap : function() {
ionic.Platform.exitApp();
}
}]
});
};
// Is there a page to go back to?
if ($ionicHistory.backView()) {
// Go back in history
$ionicHistory.backView().go();
} else {
// This is the last page: Show confirmation popup
showConfirm();
}
return false;
}, 101);
})
This is my code , but its not working ....Please help me
Just Replace .run(function($ionicPlatform, $ionicPopup) with .run(function($ionicPlatform, $ionicPopup, $ionicHistory) actually you forgot to initialise $ionicHistory
DeleteYa its working ThanQ ..
Deleteone more problem , i navigate page1 to page2 then page 2 to page3 and currently m in page3 , click of device back button should come to page2 then page1 , if page1 is exist currently want to exit the app .
Please help me to solve this problem , with above same code .
This comment has been removed by the author.
ReplyDeleteYa its working ThanQ ..
Deleteone more problem , i navigate page1 to page2 then page 2 to page3 and currently m in page3 , click of device back button should come to page2 then page1 , if page1 is exist currently want to exit the app .
Please help me to solve this problem , with above same code .
You can modify your code like this:
ReplyDeleteif ($ionicHistory.backView()) {
// Go back in history
$ionicHistory.backView().go();
} else if($ionicHistory.backView().stateName == 'YourStateName' || $ionicHistory.currentView().stateName == 'YourStateName'){
showConfirm();// if you want to exit in this condition
}else {
// This is the last page: Show confirmation popup
showConfirm();
}
you can fine more history information from here :http://ionicframework.com/docs/api/service/$ionicHistory/
Hi , it seems it's not working anymore with ionic 1.3.0
ReplyDeleteSince the update, backView is always returning null...
It's working fine in ionic 1.3.0 also
ReplyDeletei tried to implement that script on my ionic app but no luck. Then i found another way to make a toast with this script:
ReplyDelete//toast on backcall script
var lastTimeBackPress=0;
var timePeriodToExit=2000;
function onBackKeyDown(e){
e.preventDefault();
e.stopPropagation();
if(new Date().getTime() - lastTimeBackPress < timePeriodToExit){
navigator.app.exitApp();
}else{
window.plugins.toast.showWithOptions(
{
message: "Press again to exit.",
duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
position: "bottom",
addPixelsY: -40 // added a negative value to move it up a bit (default 0)
}
);
lastTimeBackPress=new Date().getTime();
}
};
document.addEventListener("backbutton", onBackKeyDown, false);
//script ends
this script work so far but it has a toast every time i press back button on all pages.
Please help me how to make make toast just when i press back button on homepage (index.html).?
thank u before....
there is problem with alert when i login the home page open and when back button is pressed the home page goes to login page and the alert is popup when i go to next page (article page) what should i do for it any solution
ReplyDeleteWon't ionicPopup work inside a ion-tab?
ReplyDeleteI m facing a error showToastMsg is not defined? can anybody help?
ReplyDelete$ionicPlatform.registerBackButtonAction(function(e) {
ReplyDeletee.preventDefault();
alert("Are you sure you want to exit AppName?");
function showConfirm() {
var confirmPopup = $ionicPopup.show({
title : 'Exit AppName?',
template : 'Are you sure you want to exit AppName?',
buttons : [{
text : 'Cancel',
type : 'button-royal button-outline',
}, {
text : 'Ok',
type : 'button-royal',
onTap : function() {
ionic.Platform.exitApp();
}
}]
});
};
// Is there a page to go back to?
if ($ionicHistory.backView()) {
// Go back in history
$ionicHistory.backView().go();
} else if($ionicHistory.backView().stateName == 'app.search' || $ionicHistory.currentView().stateName == 'app.search'){
alert("Are you sure you want to exit AppName?");
// showConfirm();// if you want to exit in this condition
}else {
// This is the last page: Show confirmation popup
alert("Are you sure you want to exit AppName?");
// showConfirm();
}
return false;
}, 999);
This doesn't work in my ionic1.Please Help me
this my ionic info:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
local packages:
Cordova Platforms : none
Ionic Framework : ionic1 1.3.4
System:
Node : v8.11.3
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
is there a working solution in ionic 3?
ReplyDelete