CODEWITHSUNDEEP
jquery-mobile
Phillip Senn
Phillip Senn

Reputation: 47625

pageshow vs pagecontainershow in jQuery mobile 1.4

I'm in the process of updating my jQuery Mobile site to 1.4.2.

When I change this:

$(document).delegate('#locations', 'pageshow', LocationsPageShown);

to this:

$('#locations').on('pagecontainershow', LocationsPageShown);

it no longer fires the event. FWIW, this fires the event:

$(document).on('pagecontainershow', LocationsPageShown);

But of course, I need it to fire when the locations page is shown, not just a generic document selector.

--- Edit 1 ---

This works:

$(document).on('pageshow', '#locations', LocationsPageShown);

But this doesn't:

$('body').on('pagecontainershow', '#locations', LocationsPageShown);

Upvotes: 2

Views: 806

Answers (2)

Nandl66
Nandl66

Reputation: 284

As stated in here jqm doc:

In jQuery Mobile 1.4.0, the two events are identical except for their name and the fact that pagecontainershow is triggered on the pagecontainer, whereas pageshow is triggered on the page.

So the main difference is the fact that pagecontainershow is received by the page container while pageshow is received directly from a page. From pagecontainershow you can get the destination page as ui.toPage and its id is ui.toPage[0].id 

$(document).on("pagecontainershow", function(e, ui) {
    // Refer page as ui.toPage or ui.toPage[0].id
    ...
});

Upvotes: 0

ezanker
ezanker

Reputation: 24738

The selector for pagecontainershow should be :mobile-pagecontainer. If that does not work for you, you can use $("body") as in 1.4 the body is always the page container:

$(":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
  alert( "This page was just hidden: " + ui.prevPage );
  alert( "The current page is : $(":mobile-pagecontainer" ).pagecontainer( "getActivePage" ));
});

The second parameter of the event (ui in the example above) gives you the page you are coming from. To get the current page you can use $(":mobile-pagecontainer" ).pagecontainer( "getActivePage" ).

So you can look at the current page ID to decide what code should be run.

Upvotes: 2

Related Questions