Jquery mobile, remove previous page

android, cordova, jquery-mobile

Solution

As I answered in this question: page hash and backbutton issue phonegap+Jquery

You can change pages without keeping them in browser history like so:

$.mobile.changePage('#page', {reverse: false, changeHash: false});

Unfortunately, I didn't manage to prevent the initial page from staying in browser history, so I used a workaround:

Page layout:

<body>    
    <!-- page_1 before page_loading in source -->
    <div data-role="page" id="page_1">
    </div>
    <!-- page_loading will be shown first -->
    <div data-role="page" id="page_loading">
        <div data-role="content">
            <h1 >
                <b>welcome</b>
            </h1>
        </div>
    </div>
    <div data-role="page" id="page_2">
    </div>    
</body>

jQuery:

function onBodyLoad()
{   
    //go to page_loading before deviceready without keeping it in browser history
    $.mobile.changePage('#page_loading', {reverse: false, changeHash: false});
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady()
{   
    //your initialization code here...

    //now go to page_1 without keeping it in browser history since the actual first page was #page_1 already       
    $.mobile.changePage('#page_1', {reverse: false, changeHash: false});

    //your code here...
}

This should fit your needs, just try it out. "#page_loading" would be your login page, "page_1" your list page...

Problem

I'm using jquery mobile with phonegap. My app has two pages: login page and list page. When login successfully, the user will go to the list page. Afterwards, when they press the back button on their phone (android), they will go back to the login page. I don't want behavior like this. What I want is to exit the app.

Original source