Geek Answers Handbook

JQM 1.4. What is the preferred way to use the pagecontainer event on a specific page / selector?

jQuery Mobile v1.4 , we are February 2014.

So, I read here (gihub) that we should do an if for the computed pagecontainer events to assume that the page is loaded.

Here is a small script trying to understand the intended behavior of the new pageContainer widget and its use.

A simple login page as such, pre-program the welcome page, and then switch to the welcome page for a successful login. There are several JS scripts on the welcome page to animate the page, it should only be run if the page is visible. How do we do this?

Here are the results that I got when investigating pagecontainer events through the console. My goal here is to find a way to find that my welcome (any page is actually) page active / visible.

I used this format as a query for understanding:

 $( 'body' ).on( 'pagecontainerbeforeload', function( event, ui ) { console.log("beforeload"); console.log(event); console.log(ui); });

So, a new start, when I load the page and JQM for the first time (i.e. /Users/login )

Events can be used:

  • pagecontainercreate => empty ui
  • PCbeforetransition => ui.toPage useful
  • PCshow => only gets ui.prevPage (which is empty in this case)
  • PCtransition => ui.toPage useful

Now they always start, even if you have disabled transition effects ( See api )

Ok, then I want to programmatically load the page (first get it), I: (I want /Users/welcome )

 $("body").pagecontainer("load", "/Users/welcome");

I fire this event (the page is not yet visible):

  • PCbeforeload => I get a URL that I could use to identify the page.
  • PCload => almost the same data as PCbeforeload

Ok, now I go to my page: (before /Users/welcome )

 $("body").pagecontainer("change", "/Users/welcome");

I fire these events:

  • PChide => ui.nextPage is the same as ui.toPage ...
  • PCbeforetransition => ui.toPage useful
  • PCshow => only gives ui.prevPage
  • PCtransition => ui.toPage is present as expected

Ok, now I'm sure that the only pagecontainer event that I want to use to make sure this page is loaded is pagecontainertransition . Here is what I implemented on every page that should run JS:

Set Page Container ID (PHP)

 <div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>">

... at the end of the page (JS)

 $( 'body' ).on( 'pagecontainertransition', function( event, ui ) { if(ui.toPage[0] == $('#'+id_url )[0] ) { functionToLaunchWhenPageShowUp(); } } );

Now, as you can see, I mean ui.toPage 1st child [0] , to compare it with $('.selector') 1st child [0] . Is this the right way to do this? I mean, the intended path using the new API. Thank you for sharing your knowledge;)

+7
jquery-mobile
source share
1 answer

I managed to make something that works, relatively simple and as close as possible to the DRY principle (don't repeat yourself).

In the order of "loading":

JS script in document <head>

 <script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script> <script type="text/javascript"> (function(){ //Global settings for JQM 1.4.0 $( document ).on( "mobileinit", function() { //apply overrides here $.mobile.defaultPageTransition = 'flip'; }); // The event listener in question ! $( document ).ready(function () { //..only launched once the body exist // The event listener in question : $( 'body' ).on( 'pagecontainertransition', function( event, ui ) { //gets the id you programatically give to your page id_url = $( "body" ).pagecontainer( "getActivePage" )[0].id; //compare the actual event data (ui.toPage) if( ui.toPage[0] == $('#'+id_url )[0] ) { // failsafe if ( typeof( window[ id_url ].initPage ) === "function" ) { // call the dynamically created init function window[ id_url ].initPage(); } } } ); }); document.loadPage = function( url ){ $( "body" ).pagecontainer( "load", url , options); }; document.changePage = function( url ){ $( "body" ).pagecontainer( "change", url , options); }; })(); </script> <script type="text/javascript" src="/js/jquery.mobile-1.4.0.min.js"></script>

The beginning of each returned page

 <div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>"> <div data-role="content"> <script type="text/javascript"> 
 // we create dynamically a function named after the id you gave to that page // this will bind it to window this[ '<?php echo $this->id_url() ?>' ].initPage = function(){ // put anything you want here, I prefer to use a call // to another JS function elsewhere in the code. This way I don't touch the // settings anymore NameOfThisPage.launchEverythingThatNeedsTo(); }; </script> ...

Here is a description of this code. Firstly, I got one place for all of these global queries, JQM already made me put things between jquery.js and jquery.mobile.js, so let's use this.

Along with the global JQM settings, I use only one event listener for the body / document / (whatever that is in the future). It starts only after the body exists.

Now where the fun begins. I programmatically give an id to all pages that the server returns (namely, a script route with _ , not / ). Then you create a function with a name after this identifier attached to the window (suppose you could put it in another place).

Then, back to the event listener, upon transition you will get the identifier that you set using the pagecontainer( "getActivePage" ) method, use this identifier to capture the page jQuery style, and then compare it with the data returned by the event listener.

If successful, use this identifier to run the init function that you put on your page. There's fault tolerance in case you don't put the init script on the page.

The bonus here is those document.loadPage / changePage. I put them there if methos changes the page changes. One place to change, and it applies to the entire application. This is DRY ^^

In general, if you comment on a way to improve this method, please . There's a big drawback to the example for v1.4 methods (along with some confusion with v1.3 examples). I tried to share my discoveries as much as I could (ps. I need these cue points: P)

+6
source share

More articles:


All Articles