jQuery Forum

The pageinit event is for this.

However, your solution is unnecessarily complicated.

 jQuery Mobile manages the size of the DOM by default. Just use single-page documents. Unless you use data-dom-cache, no more than two pages (plus your initial entry page) will ever be loaded in the DOM. Pages are discard when they are no longer needed.

(The initial entry page has to be kept in the DOM. In order to do a transition, the exiting and entering pages need to both be in the DOM.)

I don't understand why you are dynamically injecting data into the page. Just have the server generate the complete page. Dynamic injection only makes sense if you want to replace some part of a page, or for pagination or "endless scroll" of large datasets, or in case the data comes from a webservice or is generated locally in Javascript (perhaps from local storage), rather than from your server.

Hi watusiware,

Indeed I'm developing a complex app connected to a webservice. It's the mobile version of a webapp.

I'm emulating a MVC model so each page has it's own controller.js, model.js, view.js and a html5 page (single-page documents). That's why I'm injecting pages into the DOM using changePage('page2.html'), letting the JQM framework take care of the DOM, back button functionallity, transitions...

As the user navigates pages are shown, hidden or injected deppending on if new data is required or it's just about showing a page from the DOM (hidden->shown) with last data and a "refresh" button or scroll-down load-new-data functionality.

Please, have a look on this example:

Imagine an app to discover new restaurants with 3 pages. Home (show latest news from restaurants you suscribe), Restaurant (List of all restaurants available) and RestaurantProfile (info and suscribe/unsuscribe button).

So, when a user click on a restaurant from the list I need to take data from the server and placing into the different target wrappers from RestaurantProfile.html but first of all this page has to be injected into the DOM because it's not possible to load data into an isolate page and then inject it into the DOM. That's not possible.

I don't know even care about if that page is already into the DOM or has been removed. That's up to JQM framework (changePage() executes loadPage() before if required). I only need to know which page is demanded and pass the corresponding data. That's all.

Now, increase this complexity much more adding users, users profiles, users feed and comments... It can easy become a 10 page app.

That's why I decided to have single-page documents, to maintain a "clean" app structure so it's easy to add new functionality in the future.


pageinit event - It must be placed into the corresponding page and will trigger a function allways. But, as I said before, sometimes it's a simple navigation situation (up to JQM navBar) and sometimes I manage the petition and this is when I require to add data form server.

Handicap. How to know in which situation we are?



$.mobile.changePage('to', options) function - Let's figure it out if my problem can be solved by both using this function and the pageload event (I couldn't find in the domumentation if you can use same options argument for pageinit event)...

reloadPage > Can be setted to true when new data is required despite I don't know what else JQM framework is going to do even what does it means in terms of functionality...

data > I really need to able to set this into a json object. But I haven't make this work yet...


I hope the problem I'm addressing is much clear now.


QUESTIONS :

1) Does pageinit event handle same 'options' argument than
pageload event?

2) How set 'options > data' argument into a json object and correctly access its content on pageload event?

3) What does the reloadPage = true exactly entail?

So, when a user click on a restaurant from the list I need to take data from the server and placing into the different target wrappers from RestaurantProfile.html but first of all this page has to be injected into the DOM because it's not possible to load data into an isolate page and then inject it into the DOM. That's not possible.

It most certainly is possible.  It sounds like you don't really understand how jQuery Mobile page navigation and server-side requests really work and you're trying to build an overly-complicated "solution" for what jQuery Mobile already does for you.

Let's figure it out if my problem can be solved by both using this function and the pageload event (I couldn't find in the domumentation if you can use same options argument for pageinit event)...

 

Ummm, yeah, let's not...  Perhaps the old adage "Just because you can doesn't mean you should" might apply in this scenario.

Use the framework how it's intended to be used instead of trying to develop a convoluted solution that is sure to be fragile and poorly designed.  The solution has already been provided to you by watusiware in his response:

Just have the server generate the complete page. 

It's completely unnecessary to generate a "clean" page and then manually inject data from the server yourself.  This only increases the number of server-side requests that you're doing resulting in worse performance.  Just generate the page on the server side with all of the data instead of generating an empty page and then performing another server-side request to retrieve data to "inject it into the DOM" in the pageinit event.

Not certain if this is the case here, but there certainly are situations where an app or website needs to have the browser client consume a third-party web service. In that case, it's not possible to deliver the complete HTML page from the web server.

However, I still recommend, if possible (if doing this in-house, not with a third-party web service) to create the page on the server.

It's true, this will repeat fixed elements, as well as the header and footer. However, if using a fixed header and footer with a "none" or "fade" transition, the user will be unaware or minimally aware of the header, footer, and fixed content being replaced each time. The additional data transmission is minimal, especially if you make sure the server gzips the content.

I do this myself in a Rhodes app that has a database of points of interest in a city. (With Rhodes, there is a little HTTP server in the app.) Sure, one could do some AJAX here and replace only the info between the header and footer. But it is much more simple to do it by just delivering pages, and it still provides a great user experience. By being careful about what transition is used ("none") and using vclick it feels like a native app, and without having to go to unnecessary complication.

Indeed, I've measure the UI responsiveness. In this particular app, pages are displayed apx. 50mSec after the user lifts their finger from the screen (iPhone 4S, not as good on older devices). And this is with the data coming from an on-board SQLite database, with Ruby code doing the database access and rendering an ERB template. (In Rhodes apps, the primary performance limitation is jQuery Mobile, not Ruby! In particular, avoiding listviews can speed things up tremendously.)

pageinit event - It must be placed into the corresponding page and will trigger a function allways.

No, that's not true. The code for the pageinit callback can be placed in a script loaded from <head>. You should load the same <head> content for every page. jQuery Mobile will discard <head> content for every page other than the first. (It's there in case the user refreshes the page, now the page they refreshed on becomes the new base page, because they forced reload of JQM...)

BTW, if you are writing a PhoneGap, Rhodes, etc. app, and you never use data-ajax="false" or data-rel="external", then you can safely omit everything but <title> from the <head> of every page except the initial home page. I do this myself. So, that eliminates the objection to re-sending the <head> content. You can just send an empty <head> (or <title> only).

The easiest way to deal with pageinit, then, is to have some code that is loaded from <head> and thus is just there always once it is loaded. You use a selector and delegation so that the callback will be called every time a page of some particular class is loaded:

1. $(".place-page").on("pageinit", ".ui-page", function (event) {
2.   var $page = $(this);
3.    // Do whatever initialization of the page you
   
4.    // want here. You can initialize custom widgets,
   
5.    // inject data into the page, etc. It can be
   
6.    // useful to add some data- attributes to the
   
7.    // page element, This can be handy if you
   
8.    // need some database key, etc. associated
   
9.    // with the page content.
10.   var placeID = $page.jqmData("place-id");
11. 
    
12.   // You can easily find any element on the page
    
13.   // now that you have cached a jQuery object
14.   // for the page.
15. 
    
16.   var $title = $page.find(".title");
17.   var $placeList = $page.find(".place-list);
18.   }

If you are injecting content dynamically, then you might pass a parameter in the URL or $.mobile.changePage with some database ID that can be used to fetch the data.

Thank you @watusiware, much clear now.


As the user navigates, pages are injected into the DOM by using $.mobile.changePage

$.mobile.changePage('updates.html'), {
                   
                    type: "post",
                    data: myJsonObject   
                       
                });


According to JQM documentation, $.mobile.changePage auto-triggers a pageload event that I want to handle in orther to:

1) certainly know that page2.html is completely injected and ready into the DOM

2) get myJsonObject


The JQM single-page navigation model don't include <head> (even <body>) code while injecting new pages, only inject code within a container with data-role="page". So, any stylesheet or javascript must be placed into it too.

1. <div data-role="page" id="page2">
   
   <script>
   $( document ).on( "pageload", function( event, data ){
   
       // Let the framework know I'm going to handle things
       event.preventDefault();
   
       // code to access 'data.options.data' as myJasonObject
       // and appendTo('#target')
   
   </script>
   
   <div data-theme="b" data-id="header" data-role="header" data-position="fixed">HEADER</div>
   
   <div data-role="content">
   
   <div id="target"></div>
   
   </div><!-- end content -->
   
   <div class="custom" data-role="footer" data-position="fixed">FOOTER</div>
   
   </div><!-- end page -->
   

Neither pageload event is triggered, page2.html is shown and I have acces to myJsonObject

I will appreciate if you can take a last review on this.


Fonts:
http://jquerymobile.com/test/docs/api/methods.html
http://jquerymobile.com/test/docs/api/events.html
http://jquerymobile.com/demos/1.1.0/docs/pages/page-scripting.html

Don't use pageload. Use either pagecreate or pageinit. When the pagecreate callback occurs, the page is loaded, but has not yet been enhanced. pagecreate is called before JQM initializes widgets. pageinit is called after JQM initializes widgets. Take your choice.

pageload is triggered on the document, not the page. It has a special purpose and is not needed here.

pagecreate is useful if you want to inject elements that might have JQM widgets, so if you use pagecreate, you won't need to bother to trigger create on the widgets you inserted.

The script belongs in <head>, not in the page. If you put it in the page, the event won't be triggered until the second time a page matching the selector is loaded! This code needs to stick around always and catch any matching page. You are not gaining anything by putting the code in the page, and in fact are making it impossible to handle the first instance of the page.

Stop using IDs. This is going to cause you trouble. Use classes.

It's conventional to place all/most CSS and scripts in <head>. That way they get loaded once at startup and are always there. Some will disagree with this. If you have a large CSS file or script that is only used for  a certain page, you can load it with the page.

Thank you very much watusiware.

This is much clear than any JQM documentation I've read.

Now, I'm correctly handling events everytime a new page is injected into the DOM.

As you said, pagecreate event is very useful in order to add new data and get it also initialized at same time as page.

Only one BUT:

I was expecting to get a JsonObject from $.mobile.changePage when required...


Situation 1

$.mobile.changePage('page2.html'), {
                   
                    type: "post",
                    data: myJsonObject   
                       
                });

Situation 2

$.mobile.changePage('page2.html');


...BUT by using pagecreate event, it seems (I might be wrong) that any 2nd argument is received.


Is there any other way or most properly event to use in this case that also triggers on pages?

pageload is triggered on the document, not the page. It has a special purpose and is not needed here.

Again, thank you for you time and support.