deviceReady not working in PhoneGap application, how to?

Question

I have a simple PhoneGap application as fallows:

<!DOCTYPE HTML>
<html>
    <head>
        <title>PhoneGap powered App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
        <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery.mobile-1.0.min.js"></script>


    <script type="text/javascript" charset="utf-8">

        document.addEventListener("deviceready", onDeviceReady, true); 
        function onDeviceReady() {
            alert ('123');
        }
    </script>

    </head>
    <body onload="onDeviceReady()">
        <div data-role="page">

            <div data-role="header">
                <h1>title</h1>
            </div><!-- /header -->

            <div data-role="content">   
                <h2>Begin by inserting your credentials.</h2>
                ...
            </div><!-- /content -->

        </div><!-- /page -->

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {

            });
        </script>
    </body>
</html>

What happens here is that the alert alert ('123'); never gets fired. But if I take out the other JavaScript code and leave only the alert it is fired.

Also if I use $(document).ready(function () { alert ('123'); } I get the alert.

What is happening here, why the deviceready is not getting fired?

Any ideas?

You're defining the function AFTER using it. Put the function definition ABOVE the `document.addEventListener(...)` call and it should work. — Timo Ernst, Dec 13 '12 at 11:22

score 16 · Accepted Answer · answered Jan 24 '12 at 06:19

16

Try it this way :

 document.addEventListener("deviceready", function(){
      alert("123");
 },true);

answered Jan 24 '12 at 06:19

gprathour

14,813
5
66
90

Not sure. May be syntax problem. Try like this : document.addEventListener("deviceready", onDeviceReady(), true); or try changing the name of the function like myDeviceReady(). – gprathour Jan 24 '12 at 06:31
14

There's no way `document.addEventListener("deviceready", onDeviceReady(), true);` could work because you are passing the return value of `onDeviceReady` which is undefined but addEventListener expects a function. – Christoph Jan 07 '13 at 11:53
5

@Patrioticcow Try writing your line `document.addEventListener("deviceready", onDeviceReady, true); ` below the function definition rather than above it. – gprathour Apr 18 '13 at 11:15

score 16 · Answer 2 · edited Dec 17 '14 at 12:59

16

What @GPRathour provided works because document.addEventListener() is listening for deviceready, then if true, running your alert function. I didn't work how you had it because of two reasons:

1) when the DOM loaded and got down to your body tag it was calling OnDeviceReady() and the listener never got the call, so phonegap doesn't know it's ready to run.

2) you would have to call your listener from within a function and use 'false':

function init(){
  document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){
  alert('123');
}

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

Check out the phonegap API as to why to use false instead of true in your listener, has to do with the default setting, but it's worth the read to understand how phonegap listeners work.

edited Dec 17 '14 at 12:59

gprathour

14,813
5
66
90

answered Jan 30 '12 at 16:00

Godzilla74

2,358
1
31
67

For false vs. true in third arg, see http://stackoverflow.com/questions/17564323/what-does-the-third-parameter-false-indicate-in-document-addeventlistenerdev – XML Sep 11 '15 at 04:39
1

@Godzilla74 is the function name in onload property correct? Wouldn't be it init()? – gypsicoder Aug 04 '19 at 13:54

score 10 · Answer 3 · answered Aug 10 '15 at 14:48

10

Just in case you have the same problem as me, I didn't know is needed to include the cordova.js script in your index.html, you don't have to provide the file or the reference, just include this line:

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

and then Cordova will use the library when compiling, after that the event is dispatched.

answered Aug 10 '15 at 14:48

Jose Ignacio Hita

874
1
10
17

remember to REMOVE the default index.js leftover from the blank app. – pollaris Sep 30 '17 at 11:17

score 6 · Answer 4 · answered Apr 08 '14 at 14:25

6

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.......

answered Apr 08 '14 at 14:25

Kathir

4,359
3
17
29

score 5 · Answer 5 · answered Aug 23 '13 at 13:48

5

When using PhoneGap 3.0 with WP8 Device Ready will not work because Phonegap.js is NOT INCLUDED in the Visual Studio solution.

The solution is to include it manually for now.

answered Aug 23 '13 at 13:48

Michael

3,416
1
19
21

score 3 · Answer 6 · answered Sep 13 '13 at 17:12

Add you event listener for deviceready inside you doc ready...

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
         document.addEventListener("deviceready", onDeviceReady, true); 
    });

    function onDeviceReady() {
        alert ('123');
    }
</script>

You dont want to call onDeviceReady() as this will run the function when you add the listener...

score 2 · Answer 7 · answered Nov 16 '12 at 11:30

2

The main reason for unfired ondeviceready event on one or more platform, is when you try use cordova/phonegap js of the wrong platform.

answered Nov 16 '12 at 11:30

Idan Gozlan

3,173
3
30
47

1

To be totally clear, if you use the android version of cordova-xx.js on ios, it will not work, and since they are all named the same, this can some times happen. – nycynik Aug 06 '13 at 18:22

score 1 · Answer 8 · answered Oct 03 '13 at 13:37

1

Check the versions of the Cordova/phonegap library/jar files that you have added with the project (under libs) and the < script src="~/Scripts/cordova-3.0.0.js"/> script that you are referring in the HTML files. If there is a mismatch, the < script/> may not be able to refer it in the project. So that cordova fails to execute it's functionality.

answered Oct 03 '13 at 13:37

Ramajayam Ramalingam

11
1

I had this issue because I had forked an example that was using cordova-1.6.1.js, but using the Phonegap v3.4 CLI. I fixed it by replacing the cordova JS file with the one from the 3.4 release (https://github.com/apache/cordova-ios/releases/tag/3.4.0). – poshaughnessy May 08 '14 at 15:20

score 1 · Answer 9 · answered Aug 11 '16 at 05:12

1

In my case, I needed to remove meta http-equiv="Content-Security-Policy" content="...

answered Aug 11 '16 at 05:12

A. Soufi

133
1
4

score 0 · Answer 10 · answered Aug 28 '12 at 10:43

0

You're binding a handler to deviceready before you've defined the handler.

Correct would be:

function onDeviceReady(){
    alert('123')
}

document.addEventListener("deviceready", onDeviceReady, false);

And obviously your phonegap-2.0.0.js file (or other version) should be included in the file before this point.

answered Aug 28 '12 at 10:43

Wytze

7,844
8
49
62

8

Your answer is wrong, but I won't downvote but please read about [Function Hoisting](http://elegantcode.com/2011/03/24/basic-javascript-part-12-function-hoisting/) in javascript to avoid wrong answers in the future. – Christoph Jan 07 '13 at 11:56

score 0 · Answer 11 · answered Nov 25 '15 at 13:45

Make sure below path is correct and both are need to be included into html :

        <script type="text/javascript"  src="cordova.js"></script>
        <script src="js/jquery-1.11.2.min.js"></script>

  <script type="text/javascript">
        $(document).ready(function(){
        document.addEventListener("deviceready", onDeviceReady, false);
        });

        function onDeviceReady() {
        alert("inside onDeviceReady");
        }
        </script>

score 0 · Answer 12 · edited Jan 05 '18 at 05:23

0

I'm see in your code one problem, in the method, you need add onDeviceReady() equals here:

document.addEventListener("deviceready", onDeviceReady(), false);

that worked for me!!

edited Jan 05 '18 at 05:23

Albert Einstein

7,472
8
36
71

answered Jan 04 '18 at 13:38

Tales Born

31
3

You are calling onDeviceReady when you are defining the listener. You should change it so that it says `document.addEventListener("deviceready", onDeviceReady, false);` This may make it so your code doesn't execute because the `deviceready` function may never fire, based on where you add this code. Right now your code will always execute `onDeviceReady` because you're calling it right away. – CaptainBli Feb 05 '18 at 21:55

score -13 · Answer 13 · answered Feb 16 '14 at 04:34

-13

Biggest problem with PhoneGap examples are incorrect javascript syntax. Please be careful with this.. for this question,onDeviceReady should have braces...

document.addEventListener("deviceready", onDeviceReady(), true); 
function onDeviceReady() {
    alert ('123');
}

answered Feb 16 '14 at 04:34

Ragu

31
1

10

You're wrong. You want to pass a reference to the function, not execute it. – DriverDan Mar 01 '14 at 00:03
This is incorrect. As @DriverDan correctly suggested previously, DeviceReady should NOT have brackets in the first line, as this would result in an execution of the method rather than an assignment/reference. – BizNuge Mar 18 '14 at 12:07
You wont need the round brackets there. – SSS Feb 10 '15 at 05:09

deviceReady not working in PhoneGap application, how to?

13 Answers13

Linked