Phonegap Not Calling Device Ready Function

I am unable to get the device ready function to work within phonegap i.e. xcode simulator. The html is as follow: `

Solution 1:

onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.

Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.

In my index.html

<scripttype="text/javascript"src="js/libs/LABjs/LAB.min.js"></script><scripttype="text/javascript"src="js/libs/jQuery/jquery-1.9.1.js"></script><scripttype="text/javascript"src="js/index.js"></script><scripttype="text/javascript"src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>

Please notice I use the LABjs Library to load JS scripts (cordova.js is being to be loaded only if we detect that we are in a device), you can find it in google for LABjs library.

In my "js/index.js"

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


 var app = {
    // Application Constructorinitialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);

        //load scriptsif (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
            $LAB.script("cordova.js").wait(
                function(){
                    document.addEventListener('deviceready', this.onDeviceReady, false);
                    console.log('We are on Device');
                }
            );
        }else
        {
            console.log('We are on Browser');
            var _this = this;
            setTimeout(function(){
                _this.onDeviceReady(); 
            }, 1);
        }

        console.log('app.initialize() Called');
        $.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady);
    },

    // deviceready Event HandleronDeviceReady: function() {
        console.log("onDeviceReady");
        deviceReadyDeferred.resolve();
    },

    doWhenBothFrameworksReady: function()
    {
        console.log("doWhenBothFrameworksReady");
        resourcesReady = true;
    }
};

$(document).one("mobileinit", function () {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.phonegapNavigationEnabled = true;
    console.log('MobileInit');
    jqmReadyDeferred.resolve();
 });



functionPageShowFunction(e)
{
    // we are sure that both frameworks are ready here
}

functionCallPageEvent(funcToCall,e)
{
    if(resourcesReady)
    {
        returnfuncToCall(e);
    }else
    {
        setTimeout(function() {
            CallPageEvent(funcToCall,e);
        }, 200);
    }
}


$(document).ready(function () {
    console.log("document ready");
    // ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late // example:// I use the CallPageEvent beacause this event could be called before the device ready/* 
     $("#page").on("pageshow", function(e) {
                CallPageEvent(PageShowFunction,e);
            }
     */



});

app.initialize();

Solution 2:

Add

<scripttype="text/javascript"src="cordova.js"></script>

inside your index.html file, worked for me ;)

Solution 3:

just use

<scripttype="text/javascript"src="js/index.js"></script><scripttype="text/javascript">
     init(); 
</script>

INSTEAD OF

<scripttype="text/javascript"src="js/index.js"></script><scripttype="text/javascript">
    $(document).ready(function(){ init(); });
 </script>`

Share