Phonegap + Jquery Mobile: initialization / registration best practices

Question

I am developing an Phonegap (3.3.0) + Jquery Mobile (1.4) app.

I get an infinite loading page (white page with ui-loader icon). This is erratic and sometimes the app starts well.
I see a very strange bug: none of the first "console.logs" I use in my js file are displayed in the Phonegap Build Weinre debug console. Only after a certain line (which contain by the way the first asynchronous function) the console.log are displayed in the Weinre console.

So I guess I have a binding order problem related to Jquery Mobile and Phonegap, but I can't find what's wrong in my initialization.

Can I be also due to the order in which I call js files in my index.html ?

I followed this post to register Phonegap and JQM : Correct way of using JQuery-Mobile/Phonegap together? recommended here : jQuery Mobile : What is the order of page events triggering? by @Gajotres.

Can you help ?

Thanks

HTML:

<!DOCTYPE html>
<html>
<head>
...
</head>     
<body>   
<!-- SPLASH PAGE -->
<div id="splash-page" data-role="page">
    <div class='toastenjs' style='display:none'></div>
    <center id="splashLogoCenter">
        <img src="images/splash.png" width="200" />
    </center>
    </div>


<!-- WELCOME PAGE --> 
<div id="welcome-page" data-role="page">    
...
</div>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.jsonp-2.4.0.min.js"></script>  
<script src="js/functions.js"></script>
<script src="js/functionCUgly.js"></script>
<script src="js/boardDims.js"></script>
<script src="phonegap.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
<!--POUCHDB -->
<script src="js/pouchdb-2.2.3.min.js"></script>
<!--    Flexslider-->
<!--    <script src="js/flexslider-v2.js"></script>--> <!-- v2.2 doesn't work, maybe because we're not using last versions of jquery and jqm -->
<script src="js/flexsliderV2.3.js"></script>    
<!--    iScroll-->
<script type="application/javascript" src="js/iscroll.js"></script>
<script type="application/javascript" src="js/jquery.mobile.iscrollview.js"></script>
<!-- Add2home : create a shortcut icon of the wep app on the phone homescreen -->
<script type="application/javascript" src="js/add2home.js"></script>
<script src="js/GoogleLogin.js"></script>  <!--Phonegap module by eric valenzia https://github.com/valenzia10/PhonegapGoogleLogin-->
<script src="js/jquery.ddslick.min.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/html2canvas.js"></script>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    if (typeof(google) != 'undefined'){
        google.load('visualization', '1.0', {'packages':['corechart']});
    }
</script>

JS file:

    var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

$(document).one("mobileinit", function () {
    console.log('mobileinit just fired'); //this one is not displayed in the weinre console
    jqmReadyDeferred.resolve();
});

    if ( isPhoneGap() ) {
        document.addEventListener("deviceReady", onDeviceReady, false);
        function onDeviceReady() {
            deviceReadyDeferred.resolve();
        }
        $.when(deviceReadyDeferred, jqmReadyDeferred).then( EVERYTHING() ); // !!!!! normalement il faut virer ces parenthèses pour respecter le $.when....mais ça fait tout bugger !!!!!!!!!
    } else {
        console.log("NOT Running on PhoneGap!");
        $.when(jqmReadyDeferred).then( EVERYTHING );
    }


function EVERYTHING() {

console.log("on est entré dans EVERYTHING()"); //not displayed in the weinre console
insideEVERYTHING = 1;
console.log("jqmReadyDeferred is "+jqmReadyDeferred.state()); //not displayed in the weinre console
console.log("deviceReadyDeferred is "+deviceReadyDeferred.state()); //not displayed in the weinre console


//FOR EVERY PAGE
$(document).on('pagecontainershow', function (e, ui) {
    //...
});
$(document).on('pagecontainershow', function (e, ui) {
    //...
});


// --------------- SPLASH PAGE ---------------------

//$(document).on('pagecreate','#splash-page', function(){
$(document).on('pagecontainershow', function (e, ui) {
    var activePageId = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
    if (activePageId === 'splash-page') {

    console.log("we are in splash-page");

    if (typeof debugOptionUseLocalDB != 'undefined' && debugOptionUseLocalDB) {
        fallbackToLocalDBfile();
        console.log('on yess');
    }else{
        if(connectionStatus == 'online'){
                console.log("launching getJsonpFile...");
//DEBUG TIMER
var time=[];
var dummy;
dummy = new Date().getTime();
time.push(dummy);
                getJsonpFile(dbUrl())
                    .done(function(data) {  
                        console.log("...getJsonpFile done.");
                        if(localStorage) {
                            if ( isPhoneGap() || !isIOS() ) { //BUG iOS safari doesn't work with this (Cf. Philippe's ipad), si on est sur phonegap ok, si on n'est pas sur phonegap et pas sur iOS ok
                                localStorage.setItem("proDB", JSON.stringify(data)); //write to localStorage
                            }
                        }

//...JQM bindings are continued below

score 0 · Accepted Answer · answered Oct 24 '14 at 10:11

The best registration is the following :

var isPhoneGap;
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

isPhoneGap = checkIfPhoneGap();

if ( isPhoneGap ) {
    $.when(deviceReadyDeferred, jqmReadyDeferred).done( Everything );
} else {
    console.log("NOT Running on PhoneGap!");
    $.when(jqmReadyDeferred).done( Everything );
}

$(document).on("mobileinit", function () {
    //alert('mobileinit just fired');
    //popShortToast("mobileinit just fired");
    jqmReadyDeferred.resolve();
});

document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
    //popShortToast("deviceReady just fired");
    deviceReadyDeferred.resolve();
}   
function checkIfPhoneGap() {
    var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; // && document.URL.indexOf( 'file://' );
    if ( app ) {
        return true;
    } else {
        return false;
    }
}

function Everything() {
   //enter your JQM bindings here, and use Phonegap's features
}

Phonegap + Jquery Mobile: initialization / registration best practices

1 Answers1