1

$(":mobile-pagecontainer") is not working. I have to use $(document). Anything wrong with the following code?

    <div data-role="page" id="page1">

        <div data-role="header" >
            <h1>Page 1</h1>
        </div>

        <div role="main" class="ui-content">
            This is Page1.

            <a id="gotoPage2" href="#page2" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Go to Page 2</a>

            <script>

            // not working
            $( ":mobile-pagecontainer").on( "pagecontainerhide", function( event, ui ) {
                alert( "page hide ");
            });

            // working
            $( document).on( "pagecontainerhide", function( event, ui ) {
                alert( "page hide " );
            });
           </script>
         </div>
    </page>

    <page  data-role="page" id="page2">
         ....
    </page>

But it works for changing page as followings:

$(":mobile-pagecontainer").pagecontainer("change", "#page2", { } );

Thanks.

Omar
  • 32,302
  • 9
  • 69
  • 112
eastwater
  • 4,624
  • 9
  • 49
  • 118
  • To bind events, you need to use `$(document)`. `$(":mobile-pagecontainer")` is selector that needs to be wrapped in another function to work. http://stackoverflow.com/a/24173950/1771795 – Omar Nov 10 '14 at 00:44

1 Answers1

3

$(":mobile-pagecontainer") is a selector that refers to wrapper of all pages, internal or external. By default body is :mobile-pagecontainer and .pagecontainer() is a widget used to emit jQuery Mobile's special events and used for navigation.

jQuery Mobile events bubble up to document so you can use to capture those events.

$(document).on("pagecontainershow", function (e, data) {
  console.log(data.toPage); /* current active page */
  console.log(data.prevPage); /* previous page */
});

If you want to attach events to pageconatiner, you have to wrap them in .ready() in order to make them work.

$(function () {
   $(":mobile-pagecontainer").on("pagecontainerhide", function (e, data) {
      console.log(data.toPage); /* page navigating to */
      console.log(data.prevPage); /* page that was just hidden */
   });
});

It is possible also to use the widget .pagecontainer().

$(":mobile-pagecontainer").pagecontainer({
    hide: function (e, data) {
             /* code */
          },
    show: function (e, data) {
             /* code */
          }
});
Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112
  • Thanks. it works by wrapping with $(function () { $(":mobile-pagecontainer").on(...)}); But why? $(":mobile-pagecontainer") is $("body") by default, and it is available in DOM already. – eastwater Nov 10 '14 at 19:46
  • @Dave even if it's available in DOM, `body` or any other selector needs to be wrapped in another function to activate it. In jQM, use `pagecreatd` to attach listeners e.g. `click`, `changd`, etc. for pageContainer events, bind them to `document` as they can be delegated. Edit: I used `.ready()` to bind pagecontainer events one time only as `.ready()` fires once per document. – Omar Nov 10 '14 at 20:19