How to send object to another different page with Pagecontainer Widget?

Question

Let\'s say I have more or less these files in my project:

• PageA.html
• PageA.js
• PageB.html
• PageB.js

I would like to change

Answer 1

The article you mentioned is old and discussed Multi-page model, while you are using Single-page model. There is a difference in the technique followed to manipulate pages in MPM and SPM.

The pagecontainer widget was introduced in jQM 1.4; it is handy, yet requires more coding and trial & error process. Note that pagebeforechange is depreciated and replaced with pagecontainerbeforechange. Moreover, this event fires twice and returns almost the same data, as follows:

1. First time it returns .toPage value as a string
2. Second time .toPage is an object

In light of the above, you have to decide when to run your code, based on what data you want to retrieve and whether you want to do changes to previous or next page.

There are many ways to transfer and retrieve data between pages in jQM. For instance, data can be passed within jQM pagecontainer events, query string, local storage ... etc.

In your case, you want to pass an object when changing pages.

$.mobile.pageContainer.pagecontainer( "change", "pageB.html", { objectA: objA } );

Since pagecontainerbeforechange is fired on every page change, you have to add some conditions in order to prevent your code from running whenever the event is fired. Also, to determine whether the data emitted is a string or an object.

$( document ).on( "pagecontainerbeforechange" , function(e, data) {
  if (typeof data.toPage === "object" &&
    data.options.target === "pageB.html" &&
    data.options.objectA !== "") {

    var objectA = data.options.objectA, /* object passed */
        targetPage = data.toPage;       /* page you navigated to (jQuery object) */

    targetPage.find( ".foo" ).text( "objectA.bar" );

  }
});

Once you have both, the object of data and the object of the page you have navigated to, do the changes you want.

Demo