17

jQuery Mobile has various events and methods. The pagecontainer events and methods are used to handle most of the page events from v1.4. I do not understand the use of the :mobile-pagecontainer selector.

The API documentation only uses $('.selector') which is straightforward and simple to understand though, I do not know which object it is referring to. Am I supposed to use it on a $('div[data-role="page"]') or on $('body'). And what does the other selector, :mobile-pagecontainer, signify?

API: jQuery 1.4.0 API

Edit: Also, I found many examples on stackoverflow and other websites using $(document) what is the relation to all these?

Edit 2: I created a tiny fiddle which exhibits the pagecontainerbeforeshow event using all the 3 selectors $('body'), $(':mobile-pagecontainer') and $(document)Fiddle - PageContainer Events. My heart felt gratitude and thanks to @Omar

Lordbalmon
  • 1,634
  • 1
  • 14
  • 31
  • 1
    I know, and I have knocked on his door many a times and ready to read even a 10 page document, but could not find one. @NonameBilly, kindly suggest any document if you have found any :) – Lordbalmon Jun 11 '14 at 22:52
  • Lol, I like how you phrased that. –  Jun 11 '14 at 22:54

1 Answers1

21

$(":mobile-pagecontainer") is a selector, it refers to the parent element of jQM pages, both internal pages and external ones.

By default, :mobile-pagecontainer is body. It also can be referred to as $.mobile.pageContainer (mind capital "C" in pageContainer).

.pagecontainer() is a function that is used to change and load pages, as well as retrieve active page.

In short, $(":mobile-pagecontainer") = $.mobile.pageContainer = $("body") (default).

The value of :mobile-pagecontainer can be overridden on mobileinit, in case you want to wrap pages in a different element than body.

$(document).on("mobileinit", function () {
  $.mobile.pageContainer = $("#foo");
});

  • To change pages (assuming foo is the container):

    $("#foo").pagecontainer("change", "#pageID or URL");

  • To load an external page:

    $("#foo").pagecontainer("load", "URL");

  • To retrieve active page:

    $("#foo").pagecontainer("getActivePage");
Omar
  • 32,302
  • 9
  • 69
  • 112
  • 1
    The last document I reviewed before posting this question was one of yours "https://github.com/jquery/jquery-mobile/issues/6865#issuecomment-31394184", and thank you for that and the detailed explanation here. I just have a few questions on this. Even in the other link I've refered in this comment, you have used `$(document).on('pagecontainerhide',function(){...});` why have you used the `$(document)` selector? – Lordbalmon Jun 11 '14 at 23:05
  • @Lordbalmon [`document`](http://www.w3schools.com/jsref/dom_obj_document.asp) is [DOM](http://www.w3schools.com/js/js_htmldom.asp) object that holds all HTML. From it, you can access all HTML elements which are present into DOM. Another note, `.pageContainer` is different than [_pagecontainer events_](http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/). – Omar Jun 11 '14 at 23:10
  • Aah, I get it, so when you used the `$(document)` to bind the event using `on()`, you were actually binding it to the `pagecontainer` but accessed through `$(document)`. Am I correct? – Lordbalmon Jun 11 '14 at 23:14
  • @Lordbalmon Exactly. Those events are emitted and then _delegated_. However, not all of them can be delegated. Please check the link in my previous comment. Also, this [one](http://stackoverflow.com/a/20459433/1771795) will give you some insight. – Omar Jun 11 '14 at 23:17
  • Thank you @Omar, just one thing, so in the entire documentation for Pagecontainer in the official jquerymobile page, when they refer to `$('.selector')`, its the selector for the page container which could either be delegated through the `document` or `body` (if using the default option) or `:mobile-pagecontainer` is that right? – Lordbalmon Jun 11 '14 at 23:22
  • @Lordbalmon No, you have to differntiate between $(`document`) and `$(".selector")`. The former holds all HTML nodes that can be accessed via JS. The latter is an _element_ you want to target. jQM documentation has used `$(".selector").pagecontainer()` in case a different _parent / wrapper_ is used other than `body`. For events, you need `$(document)`, however, inside it, you can bind events directly to an element, e.g. `$("#foo").on("click", ...`. – Omar Jun 11 '14 at 23:28
  • the same I meant but poorly phrased in my excitement :), Thank you Omar, this answers my question completely. – Lordbalmon Jun 11 '14 at 23:30
  • @Lordbalmon Sorry, maybe I've misunderstood you. You're welcome! I'm glad I've been of help :) – Omar Jun 11 '14 at 23:31