Question

I got some controls which are visible on each site. To move those controls to the page currently active, I am using the pagebeforechange event.

$(document).bind('pagebeforechange',function(e,data) {
  var topageid=$(data.toPage).attr('id'); //MY QUESTION IS ON THIS LINE
  console.log("Changing page to "+topageid);
  $header = $('#myheader');
  $footer = $('#myfooter');
  $header.detach();
  $footer.detach();
  $header.prependTo(topageid);
  $footer.appendTo(topageid);
 });

The source code shown above works sometimes, sometimes not. That’s because from time to time data.toPage contains only an url like ...index.html#mypage.
How to detect the id of the toPage in any case?

Answer 1

You could use the pagebeforeshow event rather than the pagebeforechange event. The difference is that the former fires after external pages have been added to the DOM and the latter fires before that occurs.

There are other page-events that could work for you: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

From the documentation (linked-to above):

pagebeforechange

This event is triggered prior to any page loading or
transition.

.

pagebeforeshow

Triggered on the “toPage” we are transitioning to,
before the actual transition animation is kicked off.