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()">
Related
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.
We are developing phone-gap application.We have 4 pages like one.html,two.html,three.html,four.html.In this one(two.html) of the HTML file need to be landscape mode automatically.
Please guide to us.We are new to this.
Add this script first
<script type="text/javascript" src="cordova.js"></script>
Then inside another script tag
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var so = cordova.plugins.screenorientation;
so.setOrientation(so.Orientation.LANDSCAPE);
}
</script>
You can use the Screen Orientation PhoneGap Plugin for Android
Following is the link.
https://github.com/their/pg-plugin-screen-orientation
For saving canvas image to gallery i tried by creating plugin along with below piece of javascript code in phonegap, but after button click i got "Uncaught TypeError: Cannot read property 'version' of undefined at file:///android_asset/www/index.html:18"
for the code
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="SavePhotoPlugin.js"></script>
<link rel="stylesheet" href="index.css" />
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('myCanvas');
}
function share() {
var canvas = document.getElementById("myCanvas");
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
}
</script>
</head>
<body>
<div >
<IMG SRC="loadin.png" ALT="some text" WIDTH=100 HEIGHT=100>
<button class="button" id="myCanvas" onclick="share()">SAVE </button>
</div>
i tried with cordova 2.2, 2.9 for all the version the remains the same, tested on 2.3 version device. is this problem with the cordova version of device, or some other issue, please anybody point out mistake.
Latest versions of jQuery no longer support browser detection. Most recommend feature detection over browser detection these days.
You need to revert to jQuery libraries previous to 1.9, use the jQuery migrate plugin, or modify your JavaScript code referencing the browser version to something different like Modernizr.
Like already mentioned in the comment, you should run your code that accesses the device only after the deviceready event has fired.
Another problem is that you define a device variable inside your share() function. This will overwrite the cordova device object even if you run this after deviceready. So remove the line var device.
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.
I've been working on some code in js/html and it works great. I'm now trying to package it into an add-on for Firefox, and having some issues getting the XUL document correct.
PLAIN OLD HTML/JS
In my html test file between the <head></head> I have:
<script type="text/javascript" src="js/MyCode.js"></script>
At the end of the test file before the </body> I have:
<script type="text/javascript">MyCode.Static.Init();</script>
FIREFOX ADD-ON: OVERLAY.XUL
In an overlay.xul file in the extension package I have :
<?xml version="1.0"?>
<overlay id="mycode"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://mycode/content/MyCode.js"></script>
<script>
window.addEventListener("load", function () { gBrowser.addEventListener("load",MyCode.Static.Init,true); }, false);
</script>
</overlay>
This does not seem to enter the method, but then again I'm not even sure if I've got the listeners firing properly. Would this be the correct way to duplicate what I was doing in plain old html/js ?
See: https://developer.mozilla.org/en/Code_snippets/Progress_Listeners for how to catch all page changes/loads/reloads
Are you sure that gBrowser is ready?
Just as a sanity check, change the script tag to
alert(gBrowser);
to make sure that gBrowser is ready.
This is correct:
gBrowser.addEventListener("load",function () { MyCode.Static.Init(); }, false);
How about:
<script>
window.addEventListener("load", function () { MyCode.Static.Init(); }, false);
</script>
?