On using double tap on back button to exit app jquery code in cordova and touching on the screen, the app exits

user_10506002 0
Viewed 608

I'm trying to create a Cordova app for Android. In my app, I need functionality where, on clicking the default back button of my Cordova app, it shows a notification/dialog box/message that says "Press again to exit from the app". On clicking "yes" it should exit from the app. On clicking "No" it should stay in the app. On tapping outside the message box it exits from the app but while tapping outside the message box it should stay inside the app. I used the cordova dialog plugin in my app.

Expected result: While tapping outside the message box it should stay inside the app.

Actual result: On tapping outside the message box it exits from the app.

Can anyone help me solve this? Thanks in advance..!

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  document.addEventListener("backbutton", function(e) {
    e.preventDefault();
    navigator.notification.confirm("Press again to exit from the app", onConfirmExit, "", "Yes,No");
  }, false);
}

function onConfirmExit(button) {
  if (button == 2) {
    return;
  } else {
    navigator.app.exitApp();
  }
}
cordova-plugins cordova android jquery javascript
2 Answers

I have edited few lines from your code

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  document.addEventListener("backbutton", function(e) {
    e.preventDefault();
    navigator.notification.confirm("Press again to exit from the app", onConfirmExit, "Yes", "No");
  }, false);
}

function onConfirmExit(button) {
  if (button == 1) {
    navigator.app.exitApp();
  } else {
    
  }
}

you have added the yes and no in one filed. they should be in separate parameter.

Yes index number is 1 and No is 2.

user_92502380

I recently made something similar using jQuery, CSS, and HTML.

When user presses the back button, it shows a dialog for 2 seconds, then if user presses back button again, it closes app.

The code below goes in your html files where you want the message to show up.

<div id="dialog" class="dialog">
   <span id="dialog_text"></span>
</div>

This code goes in your CSS file. Feel free to change the style if you want.

.dialog{
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,.7);
    padding: 10px 20px;
    z-index: 1600;
    border-radius: 5px;
    width: fit-content;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
}

.dialog span{
    padding: 0px;
    text-align: center;
    font-size: 16px;
}

Next is the jQuery and function. This function when it's called it shows the dialog and hides it after 2 seconds.

function showDialog(message) {
    $("#dialog_text").html(message).delay(2000).html();
    $("#dialog").fadeIn(250).delay(2000).fadeOut(400);
}

Lastly is the logic. When pressing the back button two times.

This goes in your app.js file

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    var countPress = 0;

    document.addEventListener("backbutton", function(e) {
        e.preventDefault();
        if(countPress >= 1){
            navigator.app.exitApp();
        }
        countPress += 1;
        showDialog("Press again to close app");
        setTimeout(function(){
            countPress = 0;
        },3000);
      }, false);
/*--------------------End of Device Ready--------------------*/
}

So what this is doing is saving in variable countPress the amount of times the back button has been pressed.

On the addEventListener for the back button, this is checking the countPress variable value whether is equals to or greater than 1, meaning that if back button has been pressed twice, if so, then app closes itself; if not, then it adds 1 to countPress variable and show the dialog function which we call that function like this.

showDialog("any message you want to display on the dialog box);

If user presses back button again, then app closes itself, because now countPress value is 1.

I also included a setTimeout for 3 seconds. After 3 seconds it resets countPress variable to 0. This means that user did not pressed back button again and it could've been just an accident.

Hope this helps and it's understandable. Feel free to use it on your app and share with me any improvement you have done to this. :)

user_192603610
Related