phonegap/cordova onDeviceReady() not firing android 4.1.2

1
votes

I am at my wits end here. I am using Adobe Build and PhoneGap Version 3.5.0 and Cordova 3.4.0.

No matter what I do, my onDeviceReady() event does not fire on my android device, either as an APK or in the PhoneGap developer app.

Here is my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.ourwalmart" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <name>xxxx</name>
  <description>
xxxx  </description>
  <author email="[email protected]" href="http://xxxxxxx.org">
    OUR Walmart
  </author>
  <preference name="permissions" value="none" />
  <preference name="phonegap-version" value="3.5.0" />
  <preference name="orientation" value="default" />
  <preference name="target-device" value="universal" />
  <preference name="fullscreen" value="true" />
  <preference name="webviewbounce" value="false" />
  <preference name="prerendered-icon" value="true" />
  <preference name="stay-in-webview" value="false" />
  <!--<preference name="ios-statusbarstyle" value="black-translucent" />-->
  <preference name="detect-data-types" value="true" />
  <preference name="exit-on-suspend" value="false" />
  <!--<preference name="show-splash-screen-spinner" value="true" />
  <preference name="auto-hide-splash-screen" value="true" />-->
  <preference name="disable-cursor" value="false" />
  <preference name="android-minSdkVersion" value="7" />
  <preference name="android-installLocation" value="auto" />
  <gap:plugin name="com.phonegap.plugin.statusbar" />
  <gap:plugin name="org.apache.cordova.battery-status" />
  <gap:plugin name="org.apache.cordova.camera" />
  <gap:plugin name="org.apache.cordova.media-capture" />
  <gap:plugin name="org.apache.cordova.console" />
  <gap:plugin name="org.apache.cordova.contacts" />
  <gap:plugin name="org.apache.cordova.device" />
  <gap:plugin name="org.apache.cordova.device-motion" />
  <gap:plugin name="org.apache.cordova.device-orientation" />
  <gap:plugin name="org.apache.cordova.dialogs" />
  <gap:plugin name="org.apache.cordova.file" />
  <gap:plugin name="org.apache.cordova.file-transfer" />
  <gap:plugin name="org.apache.cordova.geolocation" />
  <gap:plugin name="org.apache.cordova.globalization" />
  <gap:plugin name="org.apache.cordova.inappbrowser" />
  <gap:plugin name="org.apache.cordova.media" />
  <gap:plugin name="org.apache.cordova.network-information" />
  <gap:plugin name="org.apache.cordova.splashscreen" />
  <gap:plugin name="org.apache.cordova.vibration" />
  <icon src="icon.png" />
   <icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" /> 
  <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
  <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
  <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
  <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
  <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
  <gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
  <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
  <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
  <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
  <access origin="*" />

</widget>

Here is my index.html file:

<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />        
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />

    <!--Styles-->

    <!--Javascript-->
    <script src="js/libs/jquery/jquery-1.9.1min.js" type="text/javascript" charset="utf-8"></script>
    <!--Phone Gap-->
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="phonegap.js"></script>

    <script>
        /* Set jQueryMobile default behavior */
        $(document).bind("mobileinit", function () {
            $.mobile.defaultPageTransition = "slide";
        });

        function onError(errorText) {  //default error behavior
            globalVarStore.error.message = errorText;
            $.mobile.loading('hide');
            $.mobile.changePage("error.html", { role: "dialog" });
        }
    </script>

    <!--Jquery Mobile / Libs-->
    <script src="js/libs/jqmobile/jqmobile.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/libs/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

    <!---Page Controllers-->


    <script>
            app.initialize();

        $(function () {
            //some jquery stuff here.                              
        });

    </script>        
</head>

And here is my index.js file that contains the deviceReady handler. This works fine for iPhone.

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler           
    onDeviceReady: function () {
    itDoesntMatterWhatIsHereItDoesntFire();
    },
2
javascriptandroidcordova
I don't see index.js in your index.html. – Thomas Bates
Check console for errors, index.js is missing & remove phonegap or cordova. Only one is enough – Manjesh V

2 Answers

0
votes

Calling app.initialize() in the header will not guarantee that the page is ready. Try adding this to the onload property of the body:

<body onload="app.initialize()">
0
votes

Sorry for even posting this. It turns out that in one of my JS files I had included the line.

window._cordovaNative = true;

This mean that it was not going into prompt mode for my older Samsung Galaxy II I was testing on. If anyone else runs into this problem, check to make sure that you don't have this line anywhere in your code!

It's useful for debugging on the browser, but kills the app for older phones.