pageConatiner widget events

[Palestinian]

The new pageConatiner events cannot be attached to a specific page. I have tested both, pagecontainershow and pagecontainerhide.

They work when attached to document only but not to #page_id.

Both has no effect:

$( ".selector" ).on( "pagecontainershow", function (e, ui ) { // code });
$( document ).on( "pagecontainershow", ".selector",  function (e, ui ) { // code });

Demo

[arschmitz]

Thank you for reporting this however the reason these dont work is because widgets emit events on them selves and you are listing for an even on page. by default the pagecontainer is the body so these events will be emitted on the body by default. please see http://api.jquerymobile.com/pagecontainer/ closing this as not a bug

[Palestinian]

@arschmitz thank you for your prompt answer.

Since pageshow, etc.. are replaced with pagecontainer widget events, how can I execute something on a specific page #id?

Thanks again.

[Palestinian]

@arschmitz

The only way to attach events to a specific page(s) on show, is to place each page in a separate container and set that container as .pagecontainer() before calling change.

Is this what you want us to do?

$("#bar").pagecontainer().pagecontainer("change", "#pageX");

JS Bin, JSFiddle

[arschmitz]

no you attach to the pagecontainer and then check the toPage property on the ui object http://api.jquerymobile.com/pagecontainer/#event-show this will be the page that is being shown.

[Palestinian]

@arschmitz Thanks again for bearing with me.

if statement is involved if I retrieve page id from ui.toPage object, unlike attaching events directly to a page id. $(document).on("pageshow", "#page_ID", function () { // code for this page only });.

pagecontainer event do fire, but cant be used with a page id selector, this is my concern.

[arschmitz]

yes this is how the events now work you must use an if statement this is not a bug.

[Palestinian]

@arschmitz Thanks for the clarification :)

[Palestinian]

@arschmitz by the way, pagecontainershow has no toPage property in ui object, it has prevPage.

[Omnhio]

I'm sorry but I can't understand either how to use the pagecontainershow event with a certain page id, since, as Palestinian said, the ui object doesn't have the toPage property. Where do you insert the if statement? Thanks!

[Palestinian]

@Omnhio instead use pagebeforeshow and pagebeforehide just neglect pageContainer widget. Or if you still want to use pageContainer widget, check this demo.

$(document).on("pagecontainerhide", function (e, ui) {
  var next_page = ui.nextPage[0].id;
  if (next_page = "foo") {
    doSomething();
  }
});

$(document).on("pagecontainershow", function (e, ui) {
  var prev_page = ui.prevPage[0].id;
  if (prev_page = "foo") {
    doSomething();
  }
});

[Omnhio]

Uhm, sorry again but I'm a newbie of jQuery Mobile. Ok for these examples, but I don't get it your point "just neglect pageContainer widget", what do you mean? If I neglected it what method or code should I use?

[Palestinian]

@Omnhio check this answer. if you need more clarification, post a question there .

[Omnhio]

Ok, thank you very much! :)

[dpolivy]

The documentation for pageshow states that it is exactly that same as pagecontainershow in 1.4.0 (http://api.jquerymobile.com/pageshow/). However, that's clearly not the case here. Should the docs for pageshow, as well as the 1.4 upgrade guide, be updated to more specifically mention the distinction here? It definitely bit me as I work on upgrading.