Question

I have a mobile web app with a login screen. After logging in, the user goes to the homescreen of the app. Since I have back buttons enabled for the entire application, the back button appears on the homescreen; however, pressing “Back” now will take the user back to the login page (which I don’t want). At the same time, the homescreen should have a “Back” button, since user might get to the homescreen from some other screen in the app and might want to go back.

So basically is there any easy way to disable the back button if it’s going to go to the login screen, but not if it’s going someplace else?

Answer 1

How about setting up an array of pages visited and checking it to see if the last page was the login page:

//setup array of page views
var page_views = [];
//add event handler for `pageshow` event
$('[data-role="page"]').live('pageshow', function () {
    //add current page to page_views array
    page_views.push(this.id);
    var page_views_length = page_views.length;
    //check if the current page is the homescreen and if the last page was the login page
    if (this.id == 'homescreen_id' && page_views_length > 1 && page_views[(page_views_length - 2)] == 'login_id') {//this assumes your login page has the id of `login_id` and your homescreen page has the id of `homescreen_id`
        //run code to hide the back button
    }
});