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>
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>
-
4
Maybe
devicereadycalls before document ready – Musa Commented Mar 25, 2013 at 2:55
4 Answers
Reset to default 4That 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:
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>
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.
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.......
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>