What is the “mobile-pagecontainer” selector

$(":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");
    

Leave a Comment