How to decide which page to load first on jQuery mobile?

I am building a mobile app using jQuery mobile and phonegap (Apache Cordova), the problem is I need to make a DB query first before I decide which page I want to load first if it is the login page or "home page" ...

According to the phonebook documentation, I need to bind the "deviceready" event to know when the device is ready and then execute DB queries.

document.addEventListener("deviceready", onDeviceReady, false);

      

The function called "onDeviceReady" creates the DB if it is not created and then queries the table named "users" and if there are one or more users I will not show the page named "main.html" otherwise case - 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 the first page is loaded when these functions are executed, 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 the ASC order is loaded by this page:

<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 have checked if there is one or more user entries in the "users" table, the "page-init" page is loaded first and then "main.html" and I don't want it because user can pretend flash memory. I just want to work out once I have checked the "users" table which page will be displayed first.

+1


source to share


2 answers


I found out the following here on stackoverflow, but I can't find the answer anymore, so I'll answer myself:

at the end of your index:

            $(document).bind("mobileinit", onMobileInit);
            $(document).ready(onPageLoad);

      



in any JS file or script tag in the 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();
    }
}

      

PS you can put the init code somewhere else, but the loading screen will be better since this is a db call, I am using browsers store which is much faster.

+4


source


It looks like it can be solved with a loading screen. Just create the first page as a loading screen, then check your database and load the correct page based on the database results. You can even add a JQM counter to inform your user that something is happening.



+1


source







All Articles