Question

I need to get the ID of the active page element loaded by jquery-mobile. I know that we can use $.mobile.activePage to get the current page in view and that we can get the ID of this element using $.mobile.activePage.attr('id'). However, it is undefined on first load of the application. In my particular application, I want users to be able to enter from any URL and I need to know the currently loaded page in order to properly initialise my navigation system

$(document).bind('pageinit', function() { 
    if($.mobile.activePage !== undefined) {
        console.log($.mobile.activePage.attr('id'));
    }
    else {
        console.log('1st page load detected');
    }
});

Outputs: 1st page load detected on first load and the ID on every subsequent page. How can I get the ID on the first load?!?

Answer 1

I think your problem is, that pageinit is too early to query for active page class.

If you load the first page, pageinit will fire BEFORE the changePage to the first page is called (the first page is also loaded via a changePage call). Only @about line 3639 in JQM, the active page class gets assigned to the page.

By that time, pageinit is long gone.

If you want to grab the ID of the first page either use any other of the available page events:

pagebeforeload = triggered before the load request (inside changepage) is made
pageload = triggered after the page was loaded
pagebeforechange = triggered before a changepage is made
pagechange = triggered after changepage is done
pagebeforeshow = triggered before the page is shown
pageshow = triggered when the page is shown

I would use pagebeforeshow, or if you want to tweak a lot of content, try pagechange or pagebeforechange.

Hope that helps!