I'm developing a web application using PhoneGap 1.5.0 but I'm unable to fire deviceready event.
The cordova-1.5.0.js I'm using was located at PhoneGap 1.5.0\lib\android\ and I'm testing at several Android devices without success.
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("onDeviceReady");
}
</script>
</head>
<body>
<p id="deviceProperties">Loading device properties...</p>
</body>
</html>
First of all You need to test it as an application and not on the web browser.
Secondly if you want to use geolocation then you can use it like this
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + new Date(position.timestamp) + '<br />';
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
i never could get cordova-1.5.0 to fire deviceready as expected on android (api 8).. no problem after switching to 1.6.1, however.
Related
I am stucked in working with Phonegap + jquery Mobile, My Page is working fine when i remove Jquery Mobile phonegap API is also working but as soon as I include Jquery Mobile in it.
The Applications starts showing the grey dot in center with no content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="jquery/jquery.mobile-1.4.2.min.css">
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="phonegap/cordova-2.7.0.js"></script>
<script src="jquery/jquery.mobile-1.4.2.min.js"></script>
<script src="js/index.js"></script>
<title>practice app</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>TestPage</h1>
</div>
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-theme='d' data-role="listview" data-filter="true" data-input="#myFilter" data-inset="true">
<li>213</li>
<li>213</li>
<li>213</li>
</ul>
<p id="geolocation">Finding geolocation...</p>
<p id="deviceProperties">Loading device properties...</p>
</div>
<script>
app.initialize();
</script>
</body>
</html>
and the Javascript code is
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
var self = this;
document.addEventListener('deviceready', function() { self.onDeviceReady(); }, false);
// document.addEventListener('DOMContentLoaded', function() { self.onDocumentLoad(); }, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
var self = this;
//Device is ready
var element ;
//alert is working and showing the device name
alert(device.name);
element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
navigator.geolocation.getCurrentPosition(onSuccess_gps, onError_gps);
function onSuccess_gps(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
// onError Callback receives a PositionError object
function onError_gps(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
},
onDocumentLoad : function() {
}
};
Have you tried loading the jQuery Mobile script before the phonegap script, like this?
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.4.2.min.js"></script>
<script src="phonegap/cordova-2.7.0.js"></script>
I'm developing an app with JQM and PhoneGap. At beginning, the app checks if GPS is enabled. If not, it should open a JQM dialog box.
The standard dialog from JavaScript works, but I want the JQM dialog, but it doesn't work.
That's my code:
<!-- PhoneGap 2.9.1 -->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
From PhoneGap Documentation:
I've insert one line at the end: $.mobile.changePage('#dialogGPS', { transition: 'pop', role: 'dialog' });
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Hello
</div>
<script type="text/javascript">
$('#home').on("pageshow", function() {
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
$.mobile.changePage('#dialogGPS', { transition: 'pop', role: 'dialog' });
}
});
</script>
</div>
The dialogGPS role:
<div data-role="dialogGPS">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<p>Content goes here.</p>
OK
Cancel
</div>
</div>
I think your dialog markup is wrong. Instead of:
<div data-role="dialogGPS">
try
<div id="dialogGPS" data-role="page">
Here is a DEMO FIDDLE
i am creating android application that gets Lat Lng and check the speed of user i am using PhoneGap GeoLocation Api but i am getting only Longitude and Latitude but in Altitude and Speed it shows null
here is the JavaScript that i get from PhoneGap website
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
var options = { enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('time');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + new Date(position.timestamp) + '<br />';
setTimeout('loop();',100);
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function loop(){
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
</script>
I am check this in Android Mobile as well as emulator same result both places that is null
The Html part is
<body>
<p id="time">Finding geolocation...</p>
Source
it might be device specific, as to whether or not those parameters are supported "If the implementation cannot provide {those variables you're having trouble with} information, the value of this attribute must be null."
A strange thing is happend with cordova, even the simpliest code doesn't work anymore. The code worked fine enough but since yesterday it isn't. I didn't change anything in the manifest.xml or any other file. Is it my device?
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
function onload(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
alert('test')
var element = document.getElementById('deviceProperties');
console.log('test');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
Now I can't run cordova anymore. This is what I get in logcat:
05-15 11:46:33.478: I/CordovaLog(26092): Changing log level to DEBUG(3)
05-15 11:46:33.478: I/CordovaLog(26092): Found preference for useBrowserHistory=true
05-15 11:46:33.478: D/CordovaLog(26092): Found preference for useBrowserHistory=true
05-15 11:46:33.478: I/CordovaLog(26092): Found preference for exit-on-suspend=false
05-15 11:46:33.478: D/CordovaLog(26092): Found preference for exit-on-suspend=false
05-15 11:46:33.483: I/CordovaLog(26092): Found preference for loadingDialog=MORE, Loading...
05-15 11:46:33.483: D/CordovaLog(26092): Found preference for loadingDialog=MORE, Loading...
05-15 11:46:33.503: D/JsMessageQueue(26092): Set native->JS mode to 2
05-15 11:46:33.508: D/DroidGap(26092): DroidGap.init()
05-15 11:46:33.618: D/CordovaWebView(26092): >>> loadUrl(file:///android_asset/www/index.html)
05-15 11:46:33.618: D/PluginManager(26092): init()
05-15 11:46:33.623: D/CordovaWebView(26092): >>> loadUrlNow()
05-15 11:46:33.628: D/DroidGap(26092): Resuming the App
05-15 11:46:33.688: D/SoftKeyboardDetect(26092): Ignore this event
05-15 11:46:33.698: D/DroidGap(26092): onMessage(onPageStarted,file:///android_asset/www/index.html)
05-15 11:46:34.088: D/SoftKeyboardDetect(26092): Ignore this event
05-15 11:46:36.068: D/Cordova(26092): onPageFinished(file:///android_asset/www/index.html)
05-15 11:46:36.068: D/DroidGap(26092): onMessage(onNativeReady,null)
05-15 11:46:36.068: D/DroidGap(26092): onMessage(onPageFinished,file:///android_asset/www/index.html)
05-15 11:46:38.068: D/DroidGap(26092): onMessage(spinner,stop)
05-15 11:46:38.353: W/dalvikvm(26092): disableGcForExternalAlloc: false
What is wrong?
The phonegap plugins: camera, accelerator etc. works but the geolocation not.
This is the code all permissions are installed like before:
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
console.log('test');
alert('test');
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
console.log(position.coords.latitude);
element.innerHTML =
'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
But the variable "position" isn't set or something, this plugin was working before now it ain't. :(
I'm using phonegap to get an accelerometer's value and print it, but I'm not sure how to display it in the main body. I'm also using JQuery. This code is taken from the accelerometer example on the Cordova (PhoneGap) website.
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
document.writeln(
'Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentAcceleration</p>
</body>
</html>
in HTML tag, use this code.
<p id="ax"></p>
<p id="ay"></p>
<p id="az"></p>
and on function onSuccess(acceleration) in javascript code. you should use this command
document.getElementById("ax").innerHTML = acceleration.x;
document.getElementById("ay").innerHTML = acceleration.y;
document.getElementById("az").innerHTML = acceleration.z;
or using jQuery like this
$("ax").html(acceleration.x);
$("ay").html(acceleration.y);
$("az").html(acceleration.z);