I have the next test code:
html:
<html>
<head>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body>
<p><button>Show keyboard</button></p>
<p><input></input></p>
<p><span>?</span></p>
</body>
</html>
and js:
document.addEventListener("deviceready", handler, false);
function handler() {
window.addEventListener('native.keyboardshow', function() {
document.getElementsByTagName("span")[0].innerHTML = "showed";
});
document.getElementsByTagName("button")[0].addEventListener("click", function() {
document.getElementsByTagName("input")[0].focus();
cordova.plugins.Keyboard.show();
});
}
The show() function works, and I understand that the plugin is available from my app. But when the keyboard is showed nothing occurs: my span tag doesn't get the "showed" text.
What is an issue?
If you are targeting Android, add <preference name="android-windowSoftInputMode" value="adjustResize" /> to config.xml as noted in this answer: https://stackoverflow.com/a/31683935/5356747
With this preference set keyboard events started to fire in my app.
You probably have added cordova-plugin-keyboard (its events doesn't fire on android. Plus, the name of events are also different).
You need to add ionic-plugin-keyboard:
cordova plugin add ionic-plugin-keyboard --save
Related
Now I am developing a time reminder application where I need to display an alert message every hour. The alert must also be displayed when the application is running in background and in offline mode as well.
It should work for both Android and iOS platforms.
Please help me out this. Thanks in Advance.
Try using this Local Notification Plugin. Your code needs to look something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
// Now safe to use device Plugins
cordova.plugins.notification.local.schedule({
id: 1,
text: 'My first notification',
every: 'hour',
firstAt: next_monday,
data: { key:'value' }
});
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I'm trying to create an app that can run on Android, iOS and Windows Phone using PhoneGap. Currently, I have only phones with Android so I can't know if the problem I'm having exists on iOS and WP.
I tried the notification (alert, beep and vibration) and the camera APIs.
I took the code lines from the Apache Cordova Documentation. I built the app on PhoneGap Built site, scanned the barcode etc. The app is installed and launched perfectly on the phones but nothing is working (for example, when I clicked on the "Vibrate" link, it doesn't vibrate).
The install and all were done by my tutors (I'm in intership), so I guess it's okay for that part.
I checked for the uses-permissions in the AndroidManifest.xml and it's okay.
I've been looking for answers by searching on google, forums etc. but so far, I've found nothing that matches or fixes my issue. That's why I'm posting this message (please don't pay to much attention for language mistake, I'm not an english native speaker).
Thank you in advance for your help.
Edit : 1st phone : Samsung Galaxy Grand Plus (GT-I9060I), Android : 4.4.4. 2nd phone : Samsung Galaxy S5 Prime (SM-G901F), Android : 5.0.2
Using Cordova version 5.0.0. Necessary plugin features have already been added.
Code from the Apache Cordova Documentation for the notifications :
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
// Empty
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
'Game Over', // title
'Done' // buttonName
);
}
// Beep three times
//
function playBeep() {
navigator.notification.beep(3);
}
// Vibrate for 2 seconds
//
function vibrate() {
navigator.notification.vibrate(2000);
}
</script>
</head>
<body>
<p>Show Alert</p>
<p>Play Beep</p>
<p>Vibrate</p>
</body>
If you are having cordova version prior to 3.0.0 then you must include plugins manually in config.xml which resides in resources folder.
If cordova version is >= 3.0.0 then you must include these native features via command line.
You need to provide the events such as click, touchend, pagebeforeshow etc. in OnDeviceReady() method. i.e. you have to register listeners to the HTML elements so that they listen to the events.
It seems that I was not using the correct version of the Apache Cordova Documention (5.0.0) but an older version. The following code is taken from the doc and is working only for vibrate(), and once again, nothing is happening for playBeep() and showAlert(). It doesn't make sense.
I also tried the Camera API (from the correct version of the doc) and it's not working either. I really don't understand why it's okay for vibration and not for the other API.
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.notification);
console.log(navigator.vibrate);
}
function alertDismissed() {
alert('Dismissed');
}
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
function playBeep() {
navigator.notification.beep(2);
}
function vibrate() {
navigator.vibrate(3000);
}
</script>
</head>
<body>
<p><a href="#" onclick="showAlert();
return false;">Show Alert</a></p>
<p><a href="#" onclick="playBeep();
return false;">Play Beep</a></p>
<p><a href="#" onclick="vibrate();
return false;">Vibrate</a></p>
</body>
</html>
I am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
I'm working my way through my first phonegap tutorial but I'm having problems.
I've set that the onDeviceReady() function be called when the "deviceready" event is fired, but the method is never called.
I tried calling the App.start() method directly, but I get an error in the console that the APP.start() method doesn't exist.
Thanks for your help!
The code for Index.html and App.js is below:
Index.html
<!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, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-2.2.0-android.js"></script>
<script type="text/javascript" charset="utf-8"
src="framework/utility.js"></script>
<script type="text/javascript" charset="utf-8"
src="app.js"></script>
<link rel="stylesheet" href="framework/base.css" type="text/css" />
<link rel="stylesheet" href="style/style.css" type="text/css" />
<title>Chapter 1 App: Quiz Time</title>
</head>
<body>
<div class="container" id="rootContainer">
</div>
<div id="preventClicks"></div>
</body>
</html>
app.js
document.addEventListener("load",function(){
document.addEventListener("deviceready",onDeviceReady,false);
},false);
function onDeviceReady() {
alert("WOAH!");
start();
}
start = function() {
PKUTIL.include([ "framework/ui-core.js", "framework/device.js" ],
function() {
init();
});
}
init = function() {
PKUI.CORE.initializeApplication();
PKUTIL.loadHTML("views/gameView.html", {
id : "gameView",
className : "container",
attachTo : $ge("rootContainer"),
aSync : true
}, function(success) {
if (success) {
gameView.initializeView();
}
});
PKUTIL.loadHTML("views/endView.html", {
id : "endView",
className : "container",
attachTo : $ge("rootContainer"),
aSync : true
}, function(success) {
if (success) {
endView.initializeView();
}
});
PKUTIL.loadHTML("views/startView.html", {
id : "startView",
className : "container",
attachTo : $ge("rootContainer"),
aSync : true
}, function(success) {
if (success) {
startView.initializeView();
PKUI.CORE.showView(startView);
}
});
}
UPDATE:
Changed type="application/javascript" to `type="text/javascript"'
add deviceready listener in load listener.
Still no luck!
Replace your tags with:
<script type="text/javascript" ...
using a application/javascript mime type isn't the standard approach.
Check your code for syntax errors (run it in Safari, or Chrome etc with the console open to see them). I find that when things don't work in PhoneGap it's usually because a JS error has crept in somewhere.
Remove all the scripts except the thing you're trying to test (lines to set the deviceready event, and the function it runs), then introduce each block of code and script one-by-one to see when it stops. That way you can isolate the block of code that is causing the problem.
I have experienced a similar problem myself. I will try to offer whatever advice I can.
First up, If you look at the Phonegaps Device Ready documentation, it notes that Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.. The reason for this, if you look at the source code, is that they're actually overriding document.addEventListener with their own function which handles all bindings of deviceready.
I found myself that when I was loading phonegap dynamically, if I would add my event listener for devicereadybefore it had hooked in, it would never come, but if I waited until the script element was loaded, it worked fine. Usually if you're just working with <script> tags directly, they actually load synchronously, so this isn't an issue. It's possible that having the scripts in the body element might cause them to load in a non-synchronous fashion, so I'd probably try moving them to the head or just above the </html>, and try changing to a more standard script element, like Henry suggests.
<script type="text/javascript" src="cordova/cordova-2.2.0-android.js"></script>
<script type="text/javascript" src="framework/utility.js"></script>
<script type="text/javascript" src="app.js"></script>
Your js should be like this
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
alert("WOAH!");
start();
}
function start() {
PKUTIL.include([ "framework/ui-core.js", "framework/device.js" ],
function() {
init();
});
}
When your js is load, and cordova ready, your function onDeviceReady will be executed. This function will do an alert and then call the function start.
Try to change
$$(document).on('deviceready', function() {
// Your content here
});
For
$$(document).on('DOMContentLoaded', function(){
// Your content here
});
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Back Button Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap-1.2.0.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {alert("back button pressed");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I want to ask if user want to exit from my app, when it click on back button.
I read this example from http://docs.phonegap.com/en/1.2.0/phonegap_events_events.md.html#backbutton
but it is not working...
How can I do to do it?
I SET SOME ALERT IN ONDEVICEREADY FUNCTION, AND I HAVE SEEN THAT IS NEVER FIRED THIS METHOD....SO THE EVENTLISTENERE DEVICEREADY IS NEVER FIRED...WHY?????
Thanks a lot.
It looks like you should definitely see the alert based on your code and your link. However the tutorial is for version 1.2 and you're using version 2.2. You may want to check that for tutorials using the same version. If one doesn't exist then the functionality may have been removed or you'll need to discuss with the Cordova developers about this problem.
If onDeviceReady() is not fired means that PhoneGap is not yet loaded.
Please make sure that your cordova-2.2.0.js file is in the correct location. As per your sample ".html" and "cordova-2.2.0.js" file should be in the same folder