jQuery Mobile get current page

Question

I am using jQuery Mobile 1.1.1 and Apache Cordova 2.0.0. I want my app to exit when I press back button but only if current page have ID = feedZive. I am using following code to do it:

function onDeviceReady(){
    document.addEventListener("backbutton", onBackKeyDown, false);
    function onBackKeyDown(){
        if ($.mobile.activePage.is("#feedZive")){
            navigator.app.exitApp();
        }
        else{
            navigator.app.backHistory();
        }

    }
};

However it looks like I can't get the current page because I have tried the following code:

var activePage = $.mobile.activePage;
alert(activePage);

and my alert is showing undefined. I have also tried to change $.mobile.activePage to $.mobile.activePage.attr("id") but it didn't work.

Answer 1

$(document).live('pagebeforeshow', function() {
    alert($.mobile.activePage.attr('id'));
});​

http://jsfiddle.net/ajD6w/5/

Answer 2

Try using

var activePage = $.mobile.activePage.attr("id");

I made a working jsfiddle for you http://jsfiddle.net/Z5Uze/1/

Answer 3

I realise this is an old thread, so this is probably a more recent addition.

Have you tried:

var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activepage[0].id == yourpageid)
{ /*do something here*/ }

or another way:

var activePage = $.mobile.activePage.attr('id')
if(activepage == yourpageid)
{ /*do something here*/ }

Answer 4

Try this, it's working for me:

var activePage = $.mobile.activePage[0].id;

Here is a Fiddle with an alert that is working: http://jsfiddle.net/9XThY/3/

Answer 5

$(document).ready(function() {

//exit when back button pressed on home screen
document.addEventListener("deviceready", function() {
    document.addEventListener("backbutton", function() {
        if ($.mobile.activePage.attr('id') == "home") {
            navigator.app.exitApp();
        } else {
            navigator.app.backHistory();
        }
    }, false);
}, false);

});

Answer 6

We're doing this:

$(document).on("pagecontainershow", function() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");

    var activePageId = activePage[0].id;

    if(activePageId != 'splashPage') { //fix rotation splash flash bug
        $("#splashPage").hide();
    } else {
        $("#splashPage").show();
    }

    switch(activePageId) {
        case 'loginPage':
            loginPageShow();
            break;
        case 'notificationPage':
            notificationPageShow();
            break;
        case 'postPage':
            postPageShow();
            break;
        case 'profilePage':
            profilePageShow();
            break;
        case 'splashPage':
            splashPageShow();
            break;
        case 'timelinePage':
            timelinePageShow();
            break;
        default:
            break;
    }
});

And navigation works like this:

    $.mobile.loading('hide');
    $(":mobile-pagecontainer").pagecontainer("change", "#timelinePage", {
        transition: 'none'
    });