Bohr Bohr - 3 months ago 9
Javascript Question

page hash and backbutton issue phonegap+Jquery

I am new to phonegap programming and hoping someone can help me out here:

cordova 1.7.0, Jquery 1.7.2 and JQM 1.1.0 are used. The app is being tested on Android.

I am trying to make a launching page for the app.

<body>
<div data-role="page" id="page_loading">
<div data-role="content">
<h1 >
<b>welcome</b>
</h1>
</div>
</div>

<div data-role="page" id="page_1">
</div>

<div data-role="page" id="page_2">
</div>
</body>


I put an
$.mobile.changePage($('page_1'), { changeHash: false});
at the end of
onDeviceReady()
function. When the app starts, it immediately showed the loading page, after the loading finished, it moves on to the first page.

On the first page, when I press backbutton on page_1, it will exit the app. This is what I want.

Then I used the mobile.changePage again to go to page 2. If I still use
changeHash: false
, backbutton will again exit the app. If I use
changeHash: true
, backbutton doesn't go back to page_1, but it goes to the loading page.

If I use
changeHash: true
on the transition from loading to page1, then the backbutton on page2 will brings up the first page, but on the first page it will brings up the loading page rather then exit the app.

My question is: How can I make the backbutton go back in history on page2, page3 and so on, but exit the app on page1?

My guess is I have to rebuild/clear the hash somehow. Can anyone show me how? thanks

Answer

I had the same problem and 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...