JqueryMobile – how to process data before page change

We just figured out the proper way to use (pagecontainer before change) previously known as (page before change). Before I explain how to utilize this event, let me tell why it is important and handy.

This JqueryMobile event is used to redirect the user from one page to another page without moving to the requested page. In this event we can also pass parameters between two pages.

This event is fired twice , producing four different types of data, prevPage, toPage, options and absUrl.

 

Check out what are JqueryMobile (pagecontainer before change) properties?

prevPage: is a jQuery object of previous page.
toPage: First call, it holds a URL of next page (string not an object). Second call, it holds a jQuery object of next page.
options: Same arguments of changePage, e.g. transition, changeHash, etc.
absUrl: It holds same value of toPage first call.

How to use JqueryMobile (pagecontainer before change) properties?

Imagine if a user login session has expired or has no access to navigate to a page even if it is in DOM, what would you do? return false will ruin Navigation History, (pagecontainer before show) will show the page first and then jump to another one.
The nice thing about this event is that we can redirect user to the URL or to a page in DOM(jQuery object)

How to implement it?

First of all, we need to determine which page is being navigated. At this stage, we can use either absUrl or toPage properties, depending on whether you want to override toPage‘s value with an object or a URL.

In case you want to override changePage, we will use options.

Navigation Between Inner Pages

Navigate to the inner page, we need to override to the Page’s value with an object as well as second call of the event. It is also possible to insert a new page dynamically if we want.

$( document ).on( "pagecontainerbeforechange", function ( event, data ) {
 
    /* all properties shouldn't return "undefined" */
    var toPage = data.toPage,
        prevPage = data.prevPage ? data.prevPage : "",
        options = data.options,
        /* to determine which page (hash) the user is navigating to */
        absUrl = data.absUrl ? $.mobile.path.parseUrl(data.absUrl).hash.split("#")[1] : "",
        /* assuming the user is logged off */
        userLogged = false;
 
    if ( typeof toPage == "object" && absUrl == "pageA" && !userLogged ) {
        /* if user wants to access pageA but he is logged off
           move to pageB with transition "flip"
           and don't update hash in URL */
        data.toPage[ 0 ] = $("#pageB")[ 0 ];
 
        $.extend( data.options, {
            transition: "flip",
            changeHash: false
        });
    }
});

Navigation to External Pages

It is same as redirecting to external page but we will override to page’s value with the object as well as on first call. But we will note that the changes in retrieving topage’s value from hash to filename- we still can use hash and redirect to hash and topage’s value is a string not an object

$( document ).on( "pagecontainerbeforechange", function ( event, data ) {
 
    /* all properties shouldn't return "undefined" */
    var toPage = data.toPage,
        prevPage = data.prevPage ? data.prevPage : "",
        options = data.options,
        /* to determine which page (filename) the user is navigating to */
        absUrl = data.absUrl ? $.mobile.path.parseUrl(data.absUrl).filename : "",
        /* assuming the user isn't an admin */
        admin = false;
 
    if ( typeof toPage == "string" && absUrl == "administrator" && !admin ) {
        /* if user wants to access pageA but he is logged off
           move to pageB with transition "flip"
           and don't update hash in URL */
        data.toPage = "http://www.test.com /noaccess.html";
 
        $.extend( data.options, {
            transition: "flip",
            changeHash: false
        });
    }
});