How exactly does $.mobile.activePage property work?

Question

I am trying something as follows,

$(document).bind ('pageshow', function (e, data) {
   console.log ($('#page_spots'));
   console.log ($.mobile.activePage);

   if ($.mobile.activePage == $('#page_spots')) { console.log ('Bingo!'); }
});

Being #page_spots a div with the attribute data-role set to page. In the example above, when the active page is #page_spots I want to log 'Bingo!' in the console.

I am a complete newbie to jQM and I don't know if this should be the right way or not.

Thank you in advance and apologies for my english.

Answer 1

You can get the active page's ID from $.mobile.activePage and compare it to a string rather than trying to compare to a jQuery object:

$(document).bind ('pageshow', function (e, data) {
   console.log ($('#page_spots'));
   console.log ($.mobile.activePage);

   if ($.mobile.activePage.attr('id') == 'page_spots') { console.log ('Bingo!'); }
});

Here is a demo: http://jsfiddle.net/E6YuA/

$.mobile.activePage is nice to have because it is always a cached object of the current data-role="page" element that you can quickly reference.

Update

I was just reading this again and you don't need to use .attr() to find the ID, you can a bit more quickly by accessing the attribute directly from the DOMElement: $.mobile.activePage[0].id