jQuery Mobile - Remove back button only when pointing to a particular page

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

Add data-ajax="false" to your login-in form. I assume your login form and home screen exist on the same domain.

So when you go to example.com you see login form (if not logged in) ... when you go to example.com you see a welcome screen...

PHP example of my index layout... (dirty):

<div data-role="page">
<?php if ($notloggedin) { ?>
    <form method="post" action="<?= $this->baseUrl('/'); ?>" id="login-form" data-ajax="false">...form...</form>
<?php } else { ?>
    YOUR PAGE
<?php } ?>
</div>

jquery mobile page links

Answer 2

Another strategy you could consider is having the login page add a parameter to the query string of the home page indicating that back should be disabled.

http://myapp.com/page.html?backDisable=true

Inside your page a simple javascript call could determine if the parameter was passed and if so disable the back button. Here's a sample using the URL parser plugin .

if ($.url().param('backDisable') === 'true') {
  $('#backButton')[0].disabled = true;
}

Answer 3

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
    }
});