Skip to content Skip to sidebar Skip to footer

Jquery Mobile, Remove Previous Page

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 b

Solution 1:

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...


Solution 2:

Keep in mind that changeHash:false refers to the destination page, not to the source. You will not be removing the source page from history. Instead, the history hash will not be updated when moving to the new page


Solution 3:

If you use the latest version of jQuery mobile (1.4+) you can use this script:

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

jQuery.mobile.changePage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.


Solution 4:

Adding options for reverse and changeHash did not work for me. using Cordova v1.6

I ended up overriding the onTouch method in my Android Activity.

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (KeyEvent.KEYCODE_BACK == keyCode) {
        // Clear browsers history if user clicks back button
        clearHistory();
    }
    return super.onKeyUp(keyCode, event);
}

Post a Comment for "Jquery Mobile, Remove Previous Page"