CODEWITHSUNDEEP
javascriptcordova
Nguyen Minh Binh
Nguyen Minh Binh

Reputation: 24423

Phonegap - onDeviceReady() wasn't fired

Please have a look and helps me resolve this issue. I have spent 2 days of headache. The function onDeviceReady never be called. Here is my codes:

    <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
            <title>DemoSimpleControls</title>
            <meta name="viewport"
                content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
                <link rel="shortcut icon" href="images/favicon.png">
                    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
                        <link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
                            <link rel="stylesheet" href="css/DemoSimpleControls.css">

                                <script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
                                <script src="../js/jquery-1.9.1.min.js"></script>
                                < script  type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
                                <script type="text/javascript" charset="utf-8">
                                    $(document).ready(function() {
                                                      // Handler for .ready() called.
                                                      document.addEventListener("deviceready", onDeviceReady, true);
                                                      });
                                    $(function() {
                                      document.addEventListener("deviceready", onDeviceReady, true);
                                      });
                                    function onDeviceReady(){
                                        alert("ready");
                                        $("#mysavedData").html("XYZ");
                                        $("#mysavedData").html(window.localStorage.getItem("data"));
                                    }

                                </script>
                                </head>

    <body id="content" onLoad="onLoad();" >
        <div data-role="page" id="page">
            <div data-role="header" >
                <a data-rel="back" href="#" >Back</a>
                <h1>My page</h1>

            </div>
            <div data-role="content" style="padding: 15px" data-theme="e">
                <div id="mysavedData">My data</div>

            </div>

        </div>
    </body>
</html>

Upvotes: 1

Views: 9509

Answers (4)

azerafati
azerafati

Reputation: 18583

It seems you don't know that for firing this event you need to also include the phonegap.js file,
And also use it like me so that first your view is loaded and then the app processes phonegap otherwise user will have to wait more.

<html>
  <head>
  ....
  <title>Index file</title>
   </head>
 <body>
   ....


    <script type="text/javascript" src="phonegap.js"></script> //you forgot this
</body>
</html>

Upvotes: 1

Kathir
Kathir

Reputation: 4377

this code work for me

<body onload="init()"></body>

function init() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
    // Now safe to use the Cordova API
}

happy coding.......

Upvotes: 1

ThinkingStiff
ThinkingStiff

Reputation: 65341

That event is horrible and has so many issues it's not worth using it. Instead, just poll until PhoneGap is ready by checking for window.device.

Demo: jsFiddle

Javascript:

function initializePhoneGap( success, failure ) {
    var timer = window.setInterval( function () {
        if ( window.device ) {
            window.clearInterval( timer );
            success();
        };
    }, 100 );
    window.setTimeout( function () { //failsafe
        if ( !window.device ) { //phonegap failed
            window.clearInterval( timer );
            failure();
        };
    }, 5000 ); //5 seconds
};

window.onload = function () {
    initializePhoneGap( function success() {
        //start app
        document.getElementById( 'result' ).textContent = 'phonegap: success';
    }, function failure() {
        //phonegap failed 
        document.getElementById( 'result' ).textContent = 'phonegap: failure';
    } );

};

HTML:

should fail on desktop after 5 seconds
<div id="result">phonegap:</div>

Upvotes: 4

user1695301
user1695301

Reputation:

Look at the following example from PhoneGap website. Put the event listener in onLoad() and remove it from the jQuery ready function. 

<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.5.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
    // Now safe to use the Cordova API
}

</script>

Explanation: Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.

The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.

Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

Upvotes: 1

Related Questions