Redirect on Start-up

Assuming that you want to redirect user to a certain page on start-up based on a condition. If a user navigates directly to a page which has no access to, or without verifying “Login Credentials“. Using mobileinit event, you can manipulate DOM or redirect user by changing URL window.location.href.

When jQuery Mobile’s framework is initialized, it looks for first div with data-role="page" in body and makes it the homepage. If there is no div with that attribute, it wraps body‘s content in data-role="page" div. Therefore, before user is redirected, jQuery Mobile’s framework auto-initializing should be disabled autoInitializePage.

Continue reading


How to detect back navigation

Yet another use of pagecontainerbeforechange; it is navigate, hashchange and popstate all in one event! Whether browser’s back button or $.mobile.back() is used, pagecontainerbeforechange is what you need.

Continue reading

pagecontainerbeforechange – How to use it

I have to admit that I just figured out the proper  way to use  pagecontainerbeforechange; previously known as pagebeforechange. Before I explain how to utilize this event, let me tell why it is important and handy.

Continue reading

jQuery Mobile “Page” Events – Extra

This is a follow-up post on the main one where I will explain some special events that fire when loading external pages via Ajax. Those events are also part of “Page Container” widget, however, they are emitted when an external page (URL) is loaded either by anchor href="link.html" statically, loading a page without navigating to it $.mobile.pageContainer.pagecontainer("load", "URL") or when moving to an external page programmatically $.mobile.pageContainer.pagecontainer("change", "URL").

Continue reading

jQuery Mobile “Page” Events – What, Why, Where, When & How?

More events: Page Container Load Events.

“Not bad” news: Two plugins that may be of help (Link)

Happy news: jQuery Mobile team is sparing a surprise for us on jQM 1.4.3 release! (Link)

We all know that jQuery-Core requires .ready() to initialize any code uses jQuery. However, it might malfunction when used in jQuery-Mobile, especially when Ajax is enabled. Why? .ready() fires once per document / file, where jQuery-Mobile’s Page Events fire continuously. I don’t want to go deeply into details and lengthy comparisons, let’s just focus on jQuery-Mobile’s Page Events.

Continue reading

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.

Continue reading