0

I want to confirm before exiting my app. For this I am using navigator.notification.confirm function of cordova (Phonegap).

My problem is when i click on the back button once, it give me a confirmation message. On confirming, it ideally should close the app, but it doesn't. I need to again click on the back button. this time it closes the app without asking for confirmation.

Which means the callback function does not get called on confirmation.

Can someone please help me fix this. below is my deviceready event listener.

Also please note it works absolutely fine on eclipse emulator. It fails only on android device.

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

function deviceisready(){
    alert("Device Ready is called");
    document.addEventListener("backbutton", function(e){
        if ( $('.ui-page-active').attr('id') == 'mainpage') {
            //window.location = "#exitDialog";
            exitAppPopup();
        }else{
            history.back();
        };
    });
};

function exitAppPopup() {
    navigator.notification.confirm(
        "Do you really want to close this app?", 
        function(buttonIndex){
            ConfirmExit(buttonIndex);
        }, 
        "Confirmation", 
        "Yes,No"
    ); 
    alert("Outside Notification"); 
    //return false;
};

function ConfirmExit(stat){
    alert("Inside ConfirmExit");
    if(stat == "1"){
        navigator.app.exitApp();
    }else{
        return;
    };
};

and below is my html code containing two pages. Only on my main page I should get the confirmation message on hitting the back button. 

<!DOCTYPE HTML>
<html>
<head>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Test</title>
<script src="js/cordova.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.custom.js" type="text/javascript"></script>

<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery.custom.css" rel="stylesheet" type="text/css">

</head>

<body>
    <div data-role="page" id="mainpage">
        <div data-id="commonHeader" data-role="header" data-position="fixed">
            <h1>Test Page 1</h1>
        </div>
        <div data-role="content">
            <ul id="mainlist" data-role="listview">
                <li><a href="#">Page 1</a></li>
            </ul>
        </div>
        <div data-id="commonFooter" data-role="footer" id="mainfooter" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#mainpage" data-icon="home" id="gen_mainpage">Main</a></li>
                    <li><a href="#mainsearch" data-icon="search" id="src_mainpage">Search</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="mainsearch">
        <div data-id="commonHeader" data-role="header" data-position="fixed">
            <h1>Test Page 2</h1>
        </div>
        <div data-role="content">
            <ul id="mainSearchList" data-role="listview">
                <li><a href="#">Page 2</a></li>
            </ul>
        </div>
        <div data-id="commonFooter" data-role="footer" id="mainsearchfooter" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#mainpage" data-icon="home" id="gen_mainsearch">Main</a></li>
                    <li><a href="#mainsearch" data-icon="search" id="src_mainsearch">Search</a></li>
                </ul>
            </div>
        </div>
    </div>    
</body>
</html>
Prals
  • 606
  • 3
  • 7
  • 22
  • Can anyone please help me? Even a small headway will be great. – Prals Feb 16 '14 at 13:29
  • try `$.mobile.activePage[0].id == "mainpage"` instead of `$('.ui-page-active').attr('id')`. or listen to _browser_'s back button `navigate` event http://stackoverflow.com/a/18213393/1771795 – Omar Feb 16 '14 at 21:20
  • Hi Omar the problem is not that. If you notice I have two alerts written in my functions. One is inside exitAppPopup() function - alert("Outside Notification"); and the other is inside ConfirmExit() function - alert("Inside ConfirmExit");. So when I hit back button I get the first alert "Outside Notification" and then I get the confirmation message "Do you really want to close this app?". On confirming nothing happens. However when i hit back button second time i get an alert "Inside ConfirmExit" and the app closes. So the problem is not with the active page. – Prals Feb 18 '14 at 09:19

1 Answers1

0

I finally got an solution to my problem. This is a very silly issue on which I wasted lot of my time.

For all those people who end up with the similar problem, and are not able to fix the issue from various solutions available on stackoverflow, please make sure you have used the same version of cordova.js and cordova-x.x.x.jar files. In my case I had two different versions of these files.

On fixing this, my problem was solved. Thanks to all those people who tried helping me.

Prals
  • 606
  • 3
  • 7
  • 22