I've been banging my head against the wall, if anyone could help, that would be super appreciated!
Both my js files are in www/js. The cordova.js file was generated for me.
The "e" in body was just to make sure my new code was getting there. It is, I've changed the letter in dozens of builds while trying to get this to work, just to make sure, and it always changes.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="example.js"></script>
</head>
<body onload="onLoad()">
e
</body>
</html>
example.js
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
alert('yo');
document.addEventListener("volumedownbutton", onVolumeDown, false);
// Add similar listeners for other events
}
function onVolumeDown() {
alert('hey');
document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;">asdfs</div>';
}
cordova.js
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() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
When I fire up the app, I get no alerts, and volume down does nothing. This is what I get in the console when I build the apk
BUILD SUCCESSFUL
Total time: 4.479 secs
Built the following apk(s):
/root/hello/platforms/android/build/outputs/apk/android-debug.apk
root#0SfCordova:~/hello# cordova -v
6.3.1
Also, I installed node and cordova on a blank ubuntu 14.04 digital ocean box using just the command line. Where do I go to see console logs? Thanks! I have no idea how to debug in this environment.
Remove Onload event from html page.And don't write cordova.js file.Cordova will automatically create this file.You can use following code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="example.js"></script>
</head>
<body>
e
</body>
</html>
example.js
document.addEventListener('deviceready',onDeviceReady,false);
function onDeviceReady() {
alert('yo');
document.addEventListener("volumedownbutton", onVolumeDown, false);
// Add similar listeners for other events
}
function onVolumeDown() {
alert('hey');
}
i came across the same error, it could not work on the emulator. Here is the solution that worked for me that i think will also work for you. I am running the latest cordova 6.3.1 on my MAC OS 10.12.
i removed this line of code from my html files. I am still trying to understand why it worked after removing the below line.
Related
I am working on an Android Cordova app where I want to programmatically open the soft keyboard when the page is loaded (keypad instead of regular keyboard).
There already is a plugin that should do exactly what I need
(Cordova Android Focus Plugin), but I can't get it to work as intended.
My code to Focus the Element 'Stunden' looks like this:
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
cordova.plugins.Focus.focus('Stunden');
}
</script>
.
.
.
<body onload="onLoad()">
When the code is executed on the device I get the following error:
Uncaught TypeError: Cannot read property 'Focus' of undefined
So I guess the code is executed before the Plugin is loaded completely, but I could not find another method than "deviceready" to wait for it.
Thanks for your help already!
After some fiddling I found out how to get it to work:
In the Android Focus Plugin Docs it says that you can set the focus on an element by calling the function
cordova.plugins.Focus.focus(element);
Replacing (element) with ("Stunden") breaks the function, instead defining a variable
element = document.getElementByID('Stunden')
does the trick. This might be really basic, but in case someone stumbles over this I will just leave it here.
The working code then looks like this
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var element = document.getElementById('Stunden')
cordova.plugins.Focus.focus(element);
}
</script>
.
.
.
<body onload="onLoad()">
I am having issues, it would seem, with using local files with my phonegap application. I am trying get a simple app up and running to scan a qr code and just display the text that was scanned. However, it is not working for some reason. I can run any JavaScript I want as long as it is in the index.html file. For some reason, whenever I try to call a function from an included js file, I get a reference error. In this code I am getting 'ReferenceError: scan_qr_code is not defined' and 'ReferenceError: onDeviceReady is not defined'. Both of these functions are from the main.js file which is supposed to be included from the index.html file. I downloaded and inspected the apk file and these files are being included in the build but for some reason are not working. Anyone have any suggestions or advice? This is driving me nuts. Seems like this should be a rather straight forward thing. Also, I'm building with the PhoneGap version as 3.7.0
I am using PhoneGap build for compiling and my folder structure is setup as thus.
/www
/scripts
main.js
jquery-1.11.3.min.js
/styles
main.css
index.html
config.xml
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="scripts/barcode.js"></script>
<link href="styles/main.css" rel="stylesheet" />
<title> </title>
<script>
$(function(){
alert('here');
try{
$("#scan_button").click(function(){
alert('Button Clicked 2');
try{
onDeviceReady();
scan_qr_code();
}catch(e){
alert(e);
}
});
}catch(e){
alert(e);
}
});
document.addEventListener("deviceready", function(){
try{
$("#scan_button").click(function(){
alert('Button Clicked');
try{
scan_qr_code();
}catch(e){
alert(e);
}
});
scan_qr_code();
}catch(e){
alert(e);
}
}, false);
</script>
</head>
<body>
<button id="scan_button">Scan QR Code</button>
</body>
</html>
main.js
$(function(){
});
function onDeviceReady(){
alert('Device Ready Fired');
}
function scan_qr_code(){
try{
alert('Scanning');
// Scan the QR code
barcode_app.scan(function(result){
code = result.text;
// Just grab the text from the scanned code
alert(code);
scan_qr_code(){
});
}catch(e){
alert(e);
}
}
config.xml
<preference name="phonegap-version" value="3.7.0" />
<access origin="*"/>
This is going to be a very wild guess, but it look like your main.js file has an extra { that shouldn't be there.
scan_qr_code(){
This could be breaking your code, and that's why your functions from main.js are undefined.
Here's a plunker showing that the code would run just fine if you remove the extra {. Well... barcode_app is now showing as undefined, I assume it's part of the scripts/barcode.js file, which by the way, is not included in your project structure either.
I am attempting to test the File API in Phonegap (this one) with the following code:
<html>
<head>
<title>PhoneGap File test</title>
<script src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
alert("devceReady");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
successCallback, error);
}
function successCallback(fileSystem) {
alert("successCallback");
console.log(fileSystem.root);
fileSystem.root.getDirectory("turdBurgle",
{create: true, exclusive: false}, onGetDirectorySuccess,
onGetDirectoryFail);
}
function error() {
alert('error function fired');
}
function onGetDirectorySuccess(dir) {
console.log("Created dir "+dir.name);
}
function onGetDirectoryFail(error) {
console.log("Error creating directory "+error.code);
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
</head>
<body>
<script src="http://192.168.1.200:8080/target/target-script-min.js#anonymous"></script>
</body>
At first I thought nothing at all was happening-there was nothing in the console to indicate that onDeviceReady had fired. However, after I added a button to body and gave the onClick instructions to fire onDeviceReady I saw that after three button clicks onDeviceReady DID fire... but it fired three times. Other than this everything performs as you would expect... the directory gets created in the proper place, no errors.
I have tried adding an onLoad listener to ensure that the DOM loads before deviceready attempts to execute successCallback but the symptoms remain the same.
I've been working on an app using AngularJS. Now, I'm ready to take my app and bundle it up with Cordova. My issue is, I'm not sure how to handle the ondeviceready event. At this time, my app is setup like this:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', initializeApp(), false);
} else {
initializeApp();
}
</script>
</body>
</html>
app.js
function initializeApp() {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function() {
...
});
myApp.run(function() {
...
});
}
I put the initialization in a function called initializeApp so I could reuse it. However, when I attempt to run this, I'm getting an error that says...
Uncaught ReferenceError: initializeApp is not defined
What am I doing wrong?
I'm not sure what your exact issue is, but I know the following piece of code is incorrect
Change
document.addEventListener('deviceready', initializeApp(), false);
To
document.addEventListener('deviceready', initializeApp, false);
By doing it the first way, you're trying to execute the function instantly.
why phonegap doesn't show alert notification ? (running on iPhone 5.1.1 , phonegap phonegap-2.1.0-0-g26d211b, mountain lion 10.8.2, xcode 4.4.1)
<html>
<head>
<link rel="stylesheet" href="themes/css/apple.css" title="jQTouch">
<script src="src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
try
{
navigator.notification.alert('Hello', ok, 'Title', 'Button!');
}
catch(e)
{
alert("doesn't support!!");
}
}
function ok() {}
</script>
</head>
</html>
Because you are trying to show an alert before phonegap/cordova framework is loaded.
$(document).ready(function(){ is not going to help you here, you must use this event to check if phonegap is successfully loaded:
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
// Now safe to use the PhoneGap API
}
More about this event: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
PhoneGap 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 PhoneGap JavaScript function
before it is loaded.