How to decide which page to load first on jquery mobile? - jquery-mobile

Question

i'm building a mobile app using jquery mobile and phonegap (Apache Cordova), the problem is that first i need to make a DB query before i decide which page i want to load first, if it's the "login" page or the "main page".
Based on the phonegap documentation i need to bind the "deviceready" event to know when the device is ready and then make the DB queries.
document.addEventListener("deviceready", onDeviceReady, false);
The function called "onDeviceReady" creates the DB if it's not created and then makes a query to a table named "users" and if there is one or more users i wan't to show a page named "main.html" otherwise a page named "login.html".
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
Basically, the problem is that while this functions are executed the first page is loaded because the following code is executed before the "onDeviceReady" function is called:
$(document).bind( "mobileinit", function(){
$.mobile.listview.prototype.options.filterPlaceholder = "Buscar...";
//-> patch for phonegap
$.mobile.allowCrossDomainPages = true;
$.mobile.page.prototype.options.backBtnText = "atrás";
});
$( document ).bind( "pagebeforeload", function( event, data ){
// here i think i would say to phone gap not to load any page until i make the db queries
//i think i can't make the DB queries here because the "pagebeforeload" is launched before the "deviceready" function
});
If the code of the first page according to the DOM in ASC order this page is loaded:
<div data-role="page" id="page-init">
<div data-role="header" data-theme="c" data-position="fixed">
<h1>Init page</h1>
</div><!-- /header -->
</div>
If i change the page to "main.html" using $.mobile.changePage("main.html"); once i checked if there is one or more user records on the "users" table, the "page-init" page is loaded first and then the "main.html" and i don't want this because the user can se a kind of flash.
I just want decided once i checked to the "users" table which page is going to be displayed first.

Answer 1

I learned the following here on stackoverflow but i can't find the answer anymore so i will answer it myself:
in the end of your index:
$(document).bind("mobileinit", onMobileInit);
$(document).ready(onPageLoad);
in any JS file or script tag in index:
function onMobileInit() {
console.log("mobile init");
$.mobile.autoInitialize = false;
}
function onPageLoad() {// Document.Ready
console.log("document ready");
try {
if(someCondition) {
document.location.hash = "#profile";
} else {
document.location.hash = "#signIn";
}
} catch (exception) {
} finally {
$.mobile.initializePage();
}
}
P.S. you can put the init code somewhere else, but a loading screen would be better since it is a db call, i use the browser storage which is way way faster i think

Answer 2

It sounds like this can be solved with a loading screen.
Just create your first page as a loading screen then check your database and load the correct page based on the database results. You can even add the JQM spinner to tell your user that something is going on.

Answer 3

This question is old, however I can say that for me just assigning the hash you want to document.location.hash, for example document.location.hash = "#profile";, without the mobile initialization procedures worked fine. You need to do this before document.ready() is run.