Phonegap and Jquery mobile registration, phonegap 2.9.0

Question

I am using phonegap 2.9.0 in Phonegap Build, and testing on my Android device.

I am not sure how to register Phonegap and Jquery Mobile events, so I added the following code (found here Correct event registration in the 'PhoneGap + jQuery Mobile' application) at the top of my boarddo.js file ... and nothing happens, everything is locked at the splash page :

var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  console.log('both frameworks are loaded');
  alert('both frameworks are loaded');
//....NOTHING POPS UP !!
}

//then I do my things :
$(document).on('pageinit','#splash-page', function(){
    //...
});
function checkConnection() {
    //...
}
$(document).on('pagebeforecreate', '#welcome-page', function(){
    //...
});
$(document).on('pageinit','#welcome-page', function(){
    //...
});

I am confused about how to register events for Phonegap + Jquery mobile apps as I have seen different opinions everywhere.

In my index.html, is the call to the js files in the correct order ? :

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/functions.js"></script>
<script src="js/boarddo.js"></script>

score 0 · Answer 1 · answered Nov 08 '13 at 05:29

0

I do not see you including the phonegap.js file.

You will need that or "deviceReady" will never be called.

You need to add:

<script src="phonegap.js"></script>

Note, you do not need to actually have a file in your root named phonegap.js. "Phonegap Build" will add it for you based on the platform it is building for.

Here is a great starter project:

https://github.com/phonegap/phonegap-start

answered Nov 08 '13 at 05:29

Red2678

3,177
2
29
43

as you said the cordova.js or phonegap.js file is not needed with Phonegap Build not even the call I guess. – Louis Nov 11 '13 at 13:44
No, you need to add the call. See the starter projects index.html for an example. – Red2678 Nov 11 '13 at 17:14

score 0 · Accepted Answer · answered Jul 18 '14 at 08:48

For me, the best initialization/registration routine for Jquery Mobile and Phonegap is the following, which allows to run your app within Phonegap, as well as a pure web app on a standard browser :

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

$(document).one("mobileinit", function () {
    console.log('JQM is ready');
    jqmReadyDeferred.resolve();
});

if ( isPhoneGap() ) {
    console.log("Running on PhoneGap!");
    document.addEventListener("deviceReady", onDeviceReady, false);
    function onDeviceReady() {
        console.log('after :deviceReadyDeferred is '+deviceReadyDeferred.state());
        deviceReadyDeferred.resolve();
    }

    $.when(deviceReadyDeferred, jqmReadyDeferred).then( doWhenBothFrameworksLoaded );
    function doWhenBothFrameworksLoaded() {
        alert('success :deviceReadyDeferred is '+deviceReadyDeferred.state());
        console.log('Phonegap and JQM are loaded');
        EVERYTHING();
    }

} else {
    console.log("NOT Running on PhoneGap!");
    $.when(jqmReadyDeferred).then(doWhenJqmLoaded);
    function doWhenJqmLoaded() {
        console.log('Only jqm is loaded');
        EVERYTHING();
    }
}

function isPhoneGap() {
    var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
    if ( app ) {
        return true;
    } else {
        return false;
    }
}

Phonegap and Jquery mobile registration, phonegap 2.9.0

2 Answers2