Best posts made by dldpower2plan

Hi,
I ran into a little problem while using the onsen dialog in my app.

I use the android backbutton in order to navigate back in my app, and when I’m on the home page, a back button click would show a prompt for the user, whether they want to close the app or not.
To get this working, I had to override the default back button behaviour, and I found some tutorials for that. That works nicely.

However, I just noticed that even though my ons-dialogs are specified as cancelable, i am not able to use the backbutton to close / hide them.

Here’s my index.js script where I have my backbutton handler:

     myApp.run(['$rootScope', function($rootScope) {
		document.addEventListener('deviceready', function() {
			
			// Handle the Cordova pause and resume events
			document.addEventListener( 'pause', onPause.bind( this ), false );
			document.addEventListener( 'resume', onResume.bind( this ), false );
			
			// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
			ons.disableDeviceBackButtonHandler();
			document.addEventListener("backbutton", onBackKeyDown, false);
		}, false);
	}]);

       
    var AlreadyFiredBackButton = false;
	function onBackKeyDown(e) {
		try {
			if(AlreadyFiredBackButton == false) {
				AlreadyFiredBackButton = true;
				if(myNavigator.topPage.name=="home.html") {
					ons.notification.confirm({
						message: 'Are you sure you want to close?',
						title: 'Close app',
						buttonLabels: ['Yes','No'],
						callback: function(idx) {
							switch (idx) {
							  case 0:
								AlreadyFiredBackButton = false;
								try{
									if (navigator.app) {
										navigator.app.exitApp();
									} else if (navigator.device) {
										navigator.device.exitApp();
									}
								}
								catch(err) {
								}
								break;
							  case 1:
								AlreadyFiredBackButton = false;
								break;
							}
						}
					});	
				}
				else {
					try {
						AlreadyFiredBackButton = false;
						myNavigator.popPage();
						return;
					}
					catch(err) {
						AlreadyFiredBackButton = false;
					}
				
					try {
						AlreadyFiredBackButton = false;
						myNavigator.resetToPage('home.html');
						return;
					}
					catch(err2) {
						AlreadyFiredBackButton = false;
					}
				}
			}
		}
		catch(pageerror) {
			AlreadyFiredBackButton = false;
		}
	}

Here’s my index.html where I’ve specified my login dialog:

<ons-template id="loginform.html">
	<ons-dialog var="loginform" cancelable ng-controller="AppController">
		<ons-toolbar inline>
			<div class="center">
				Change Credentials
			</div>
		</ons-toolbar>
		<div class="login-form-div">
			<p>
				<input placeholder="Username" id="username" ng-model="email" class="text-input">
			</p>
			<p>
				<input type="password" placeholder="Password" id="password" ng-model="password" class="text-input">
			</p>
			<div style="text-align: center" class="content-padded">
				<ons-button style="width:48%;" ng-click="loginform.hide();">Cancel</ons-button>
				<ons-button style="width:48%;" ng-click="saveCredentials(lfusername, lfpassword);">Save</ons-button>
			</div>
		</div>
	</ons-dialog>
</ons-template>

Any ideas why the ons-dialog is not disappearing when hitting the backbutton on android?