Passing parameters between pages (Multi-Page Model)


jQuery Mobile’s .changePage() (1.3) / .pagecontainer() (1.4) offers data exchange between pages but only on Single Page Model, where URL is used and not a #page id.

A possible solution for this, is to use localstorage. However, it is worth mentioning that not all browsers support localstorage and some users have complained its’ slowness.

If you have been struggling to find a clean yet fast way to transfer/pass parameter between pages in Multi-Page Model, here is the way I do it.

pagebeforechange( event, data )

This special jQuery Mobile event fires twice, one for current active page and one for the page that is about to be visibile and passes two objects, event and data.

We are going to focus on second object data, because it holds all details related to both pages. For current active page, details can be retrieved from data.options.fromPage object and for next page, data.toPage.

Data Exchange

To pass data between pages, we need to use .changePage() (1.3) / .pagecontainer() (1.4) function to push data into data.options object and then retrieve it on pagebeforechange event. The, data.options object holds navigation-related properties such as, transition, changeHash, reverse…etc, those options can be retrieved as object properties i.e. data.options.transition which will return type of transition used to move to next page. The trick is to use data.options object to pass whatever data you want with caution! We don’t want to override any of the existing properties, we just want to pass data using different property name. Enough talking, let’s do it!

Passing data – jQuery Mobile 1.3.x (Demo)

$.mobile.changePage( "#pageX", { foo: "Hello World!" } );

Passing data – jQuery Mobile 1.4.x (Demo)

$.mobile.pageContainer.pagecontainer( "change", "#pageX", { foo: "Hello World!" } );

Retrieve data – jQuery Mobile all versions

$( document ).on( "pagebeforechange" , function ( event, data ) {
    if ( data.toPage[0].id == "pageX" ) {
        var stuff = data.options.foo;
        console.log(stuff);
    }
});

Enjoy!

Advertisements

8 thoughts on “Passing parameters between pages (Multi-Page Model)

  1. Hi Omar,

    I want to pass data using the pagecontainer’s load method like: $.mobile.pageContainer.pagecontainer( “load”, “#pageX”, { foo: “Hello World!” } ); but data.options.foo is ‘undefined’ …
    I’ve read the “Page Events” article and the pagecontainer API but I don’t get it. Could you give an explanation to me?

    Thanks, Chris

  2. Hi Patrick,

    Thank you for passing by!

    Yes, I have used pageinit as I have written this article before jQM team announces the deprecation of pageinit. So you’re 100% right, it should be pagecreate. However, pageinit will work as well as old “page events” but they’ll be removed in jQM 1.5.

    The purpose of this article is to pass parameters between pages by utilizing data objects transfered during pagebeforechange event. It is just faster than using localStorage and “maybe” safer than using global variables.

    Should you have any question, please feel free!

    Regards,

  3. Hi Omar,

    In your Post JQUERY MOBILE “PAGE” EVENTS – WHAT, WHY, WHERE, WHEN & HOW? (UPDATED) you mention the event pagecreate to add elements dynamically to a page, but here you use pageinit and pagebeforechange in the 1.4.x Demo, can I ask you why ?

    Thanks.

    Regards,
    Patrick.

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s