I'm having trouble getting any sort of interactivity from my first Cordova project. I have experience in HTML, Javascript and CSS, so I figured Cordova would be a perfect introduction to hybrid app development but I can't seem to get even a basic HTML button to work on the app.
I'm using Windows 10 with Android Studio and Cordova installed. I think I've set up the project file structure correctly. I've been following Cordova's docs and have installed the geolocation plugin on all device types. For testing I'm using both the virtual android devices in Android Studio, and an android phone (OnePlus X), it's connected correctly (the app opens up on the phone whenever I type "cordova run android" into the console).
I started off trying to get my current location, and then displaying the coordinates as an alert. This wasn't working, so to try something more simple I added a button that should show an alert pop-up when clicked, but neither are working. This is my current code:
www/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1 id="headertext">My first Cordova App!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id="geolocation">Device is ready!</p>
</div>
<br>
<div>
<button type="button" onclick="basicAlertTest();">Click Me!</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
// onSuccess Callback
// current GPS coordinates
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Listening for the device to be ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation should be able to run successfully now...");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Checking to see if a basic alert will appear on click of "Click me!" button
function basicAlertTest(){
alert("This is the alert test, button works!");
}
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Is there something basic I'm missing? I thought I would be able to code in HTML/Javascript/CSS as normal, but would need to learn some lines of code to integrate the plugins that use native device features (like the geolocation or camera). I've made sure to install the geolocation plugin (using cordova plugin add cordova-plugin-geolocation), but the alert isn't appearing. Do I need a separate plugin to display alerts/interact with the screen?
Also, I notice that whenever I test it virtually, if I look at the location in "Extended Controls", the coordinates it gives are:
Longitude: -122.0840
Latitude: 37.4220
Altitude: 0.0
Which is Mountain View, CA, about 8,000 miles away from me ¯_(ツ)_/¯
Here's a screenshot:
I am testing this locally, does that make a difference? I'd really appreciate any help or advice on this, I'm probably missing something really obvious. Thank you in advance!
UPDATE 1 The list of installed plugins returned from "cordova plugin ls":
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-dialogs 1.3.0 "Notification"
cordova-plugin-geolocation 2.4.0 "Geolocation"
cordova-plugin-whitelist 1.3.0 "Whitelist"
UPDATE 2
The onSuccess function is supposed to run after the device is ready. When it runs it should show an alert containing location details, but since I was getting the "device ready" message with no alert appearing, I decided to add a button to manually call the function as well.
I'm now certain onSuccess is not running correctly when the device is ready, because whenever I click the button to make it run manually the following error shows up in the console:
Uncaught TypeError: Cannot read property 'coords' of undefined
I'm confused as I'm using the same code as shown here: .html
Also, I've noticed that the index template I'm working off contains <script type="text/javascript" src="cordova.js"></script>, however when I look at the folder containing my index file, there is no cordova.js file, it's not located there, and I can't seem to find it among the cordova download, is this normal or does it need to be downloaded separately?
Latest attempt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; img-src * data: 'unsafe-inline'">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="app">
<h1 id="headertext">My first Cordova App!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id="geolocation">Device is ready!</p>
</div>
<br>
<div>
<button type="button" onclick="basicAlertTest();">Click Me!</button>
<button type="button" onclick="onSuccess();">Run onSuccess function</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
// onSuccess Callback
// current GPS coordinates
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Listening for the device to be ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation should be able to run successfully now...");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Checking to see if a basic alert will appear on click of "Click me!" button
function basicAlertTest(){
console.log("This is the alert test, button works!");
alert("This is the alert test, button works!");
}
</script>
</body>
</html>
I'm having trouble getting any sort of interactivity from my first Cordova project. I have experience in HTML, Javascript and CSS, so I figured Cordova would be a perfect introduction to hybrid app development but I can't seem to get even a basic HTML button to work on the app.
I'm using Windows 10 with Android Studio and Cordova installed. I think I've set up the project file structure correctly. I've been following Cordova's docs and have installed the geolocation plugin on all device types. For testing I'm using both the virtual android devices in Android Studio, and an android phone (OnePlus X), it's connected correctly (the app opens up on the phone whenever I type "cordova run android" into the console).
I started off trying to get my current location, and then displaying the coordinates as an alert. This wasn't working, so to try something more simple I added a button that should show an alert pop-up when clicked, but neither are working. This is my current code:
www/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1 id="headertext">My first Cordova App!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id="geolocation">Device is ready!</p>
</div>
<br>
<div>
<button type="button" onclick="basicAlertTest();">Click Me!</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
// onSuccess Callback
// current GPS coordinates
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Listening for the device to be ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation should be able to run successfully now...");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Checking to see if a basic alert will appear on click of "Click me!" button
function basicAlertTest(){
alert("This is the alert test, button works!");
}
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Is there something basic I'm missing? I thought I would be able to code in HTML/Javascript/CSS as normal, but would need to learn some lines of code to integrate the plugins that use native device features (like the geolocation or camera). I've made sure to install the geolocation plugin (using cordova plugin add cordova-plugin-geolocation), but the alert isn't appearing. Do I need a separate plugin to display alerts/interact with the screen?
Also, I notice that whenever I test it virtually, if I look at the location in "Extended Controls", the coordinates it gives are:
Longitude: -122.0840
Latitude: 37.4220
Altitude: 0.0
Which is Mountain View, CA, about 8,000 miles away from me ¯_(ツ)_/¯
Here's a screenshot:
I am testing this locally, does that make a difference? I'd really appreciate any help or advice on this, I'm probably missing something really obvious. Thank you in advance!
UPDATE 1 The list of installed plugins returned from "cordova plugin ls":
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-dialogs 1.3.0 "Notification"
cordova-plugin-geolocation 2.4.0 "Geolocation"
cordova-plugin-whitelist 1.3.0 "Whitelist"
UPDATE 2
The onSuccess function is supposed to run after the device is ready. When it runs it should show an alert containing location details, but since I was getting the "device ready" message with no alert appearing, I decided to add a button to manually call the function as well.
I'm now certain onSuccess is not running correctly when the device is ready, because whenever I click the button to make it run manually the following error shows up in the console:
Uncaught TypeError: Cannot read property 'coords' of undefined
I'm confused as I'm using the same code as shown here: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html
Also, I've noticed that the index template I'm working off contains <script type="text/javascript" src="cordova.js"></script>, however when I look at the folder containing my index file, there is no cordova.js file, it's not located there, and I can't seem to find it among the cordova download, is this normal or does it need to be downloaded separately?
Latest attempt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; img-src * data: 'unsafe-inline'">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="app">
<h1 id="headertext">My first Cordova App!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id="geolocation">Device is ready!</p>
</div>
<br>
<div>
<button type="button" onclick="basicAlertTest();">Click Me!</button>
<button type="button" onclick="onSuccess();">Run onSuccess function</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
// onSuccess Callback
// current GPS coordinates
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Listening for the device to be ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation should be able to run successfully now...");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Checking to see if a basic alert will appear on click of "Click me!" button
function basicAlertTest(){
console.log("This is the alert test, button works!");
alert("This is the alert test, button works!");
}
</script>
</body>
</html>
3 Answers
Reset to default 10Remove this line at the top of your index.html file
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">
Try to use this Content - Security - policy it should work.
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">Put extra condition to check whether geolocation plugin is properly installed on your app. So, it'll be like,
if(navigator.geolocation){
console.log('Geolocation is there');
navigator.geolocation.getCurrentPosition(function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
} , function(error) {
console.log('Error while connecting to geolocation ' + error);
}, {timeout:10000});
} else {
console.log('Geolocation is not there');
}
Uncaught TypeError: Cannot read property 'coords' of undefinedthanks in advance for any help with this. – Emily Commented Oct 18, 2016 at 15:48