Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. dldpower2plan
    3. Best
    D
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Best posts made by dldpower2plan

    • Onsen Dialog not closed by Android back button

      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?

      posted in Onsen UI
      D
      dldpower2plan