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
When jQuery Mobile’s framework is initialized, it looks for first div with
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
Yet another use of
pagecontainerbeforechange; it is
popstate all in one event! Whether browser’s back button or
$.mobile.back() is used,
pagecontainerbeforechange is what you need.
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.
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
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.
.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.