How will I create a simple onClick() if else statement. that when the user hits the backbutton it will lead to the previouse page or activity in android? below is my code but i know there something missing. and can you please help me out? I am using eclipse with phonegap for Android.
Here is my Code:
<script type="text/javascript" charset="utf-8">
document.addEventListener("backbutton", onBackKeyDown, false);
</script>
<script type="text/javascript" charset="utf-8">
function onBackKeyDown() {
/* WHAT SHOULD I PUT IN HERE? any suggestions?*/
}
</script>
Many thanks to all of you guys.
You have registered a listener which will listen to the BackKey of Android.
Now Suppose you want to navigate to a page then you just need to do this
<script type="text/javascript" charset="utf-8">
document.addEventListener("backbutton", onBackKeyDown, false);
</script>
<script type="text/javascript" charset="utf-8">
function onBackKeyDown() {
navigator.app.loadUrl("file:///android_asset/www/something.html"); //to go to a page
}
</script>
Is this what you want to go to a Page?
Related
I'm new to Phonegap and having problems firing 'deviceready' event. Initially when run for the first time, the 'deviceready' event fired and worked. Later as I added more events ('backbutton', 'menubutton'...), I noticed 'deviceready' event and all other events stopped firing.
Here is the index.html code:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
alert("Device Ready!!!");
}
</script>
</head>
<body onload="onBodyLoad()">
First PhoneGap App...
</body>
</html>
I have reviewed similare post in StackOverFlow and tried all options but still does not seem to work.
Please help me at the earliest as I need to quickly learn PhoneGap for further implementation. Hoping quick response.
Thanks,
RK
you can simply use following code for trigger various events like (backbutton,menubutton)
in script tag
$(document).ready(function()
{
document.addEventListener("deviceready", appReady, false);
function appReady()
{
document.addEventListener('backbutton', function(e){
var activePage = $.mobile.activePage.attr('id');
if(activePage == 'main')
{
if (confirm("Press a button!"))
{
alert("You pressed OK!");
navigator.app.exitApp();
}
else
{ alert("You pressed Cancel!");
}
}
}, false);
}
});
I have started using JQuery in my Phonegap mobile application, and since I have done so I am unable to Capture or Program Back & Menu keys. I have tried all the solutions mentioned here without success.
Currently this is what I have (onload is calling from ):
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
return;
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
}
function onMenuKeyDown() {
$("#AudioPopup").popup("open");
return;
}
function onBackKeyDown() {
$("#AudioPopup").popup("open");
return;
}
It was working fine before moving to JQuery mobile.
Any help will be appreciated.
Thanks!
AR
I use the following code for dealing with PhoneGap back events inside onDeviceReady:
//handle back button
document.addEventListener("backbutton", function(e) {
if($.mobile.activePage.is('#main',
{ transition: "fade", changeHash: false })){
e.preventDefault();
navigator.app.exitApp();
} else {
location.href='main.html';
}
}, false);
Replace backbutton with menubutton for the menu event. I've also added a JQuery fade transition to smooth out the process as user experience goes. This would also enable you to place the code into the onDeviceReady function, instead of calling it from somewhere else.
Tested with:
jquery-1.8.2;
jquery.mobile-1.2.0;
phonegap-2.8.
Edit:
It seems that now your issue is that of onDeviceReady not triggering when on mobile device environment. I would suggest you try using a deferred object model, such as the one explained here: Correct way of using JQuery-Mobile/Phonegap together?
This could be an issue of both JQM and PG trying to race for initialization and causing conflicts. If it doesn't work, please provide details of how you are dealing with mobileinit
This is what ultimately made my day. And hopefully it should help others as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Project</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(doInit);
</script>
<script src="js/MyOwn.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/cordova-2.6.0.js"></script>
<script type="text/javascript">
$(document).bind('mobileinit', function () {
jqd.resolve();
});
document.addEventListener('deviceready', deviceReady(), false);
function deviceReady() {
dd.resolve();
document.addEventListener("menubutton", function(e) {
e.preventDefault();
MyCustomMenuFunction();
}, false);
document.addEventListener("backbutton", function(e) {
e.preventDefault();
MyCustomBackFunction();
}, false);
onDeviceReady();
}
function doInit() {
onDeviceReady();
}
</script>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.min.css">
</head>
Two thing to be noted:
- As I am new to this stuff, I was not adding cordova js earlier. After I added cordova-2.6.0.js then only menubutton started working. Whereas backbutton started working after I added cordova.js as well.
- "deviceReady()" works but "deviceReady" doesn't. Don't know why.
I am new to phonegap.In my application i want display alerts.For that i have used following code,
navigator.notification.alert("PhoneGap is working");
But it is not working.My total html code is,
<html>
<head>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
<script>
function inti()
{
alert("inti");
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
alert("on device ready!!!!");
navigator.notification.alert("PhoneGap is working");
}
</script>
</head>
<body onload="inti()">
<p id="demo">System date</p>
<input type="button" onclick="noti()" value="Date" />
</body>
</html>
i got Cannot call method 'alert' of undefined i got this error .can any one guide me to over come this issues. Thanks in Advance .....
You forgot to add the cordova.js . Try to add this.
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
also add
document.addEventListener("deviceready", onDeviceReady, true); above onDeviceReady() function.
Check your Cordova Jar file version and you have written in <script>. May it'll be different.
navigator.notification.alert( "Yes",
callBackFunctionB, // Specify a function to be called
'Heading',
"OK"
);
I am new to PhoneGap.
My application has to 2 pages. The first is loading fine. First page contains one buttons, which when clicked should move to the second page. How to load the second page? Should I prepare one more activity extending DriodGap?
I have one more problem: how to catch back button events?
Code to navigate to another html page.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady()
{
// navigator.notification.alert("PhoneGap is working");
}
function callAnothePage()
{
window.location = "test.html";
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
<button name="buttonClick" onclick="callAnothePage()">Click Me!</button>
</body>
Code for back Event.
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady()
{
document.addEventListener("backbutton", BackKeyDown, true);
}
function BackKeyDown()
{
navigator.notification.alert();
//navigator.app.exitApp(); // For Exit Application
}
</script>
You need to redirect from Javascript like this:
HTML Code:
<a id="loginLnk" href="javascript:(void)">Login</a>
Javascript code:
document.getElementById("loginLnk").addEventListener("click", function(){window.location = "/test.html";});
I've tried to setup Phonegap on Android and deviceready won't fire. The reason is that DeviceInfo.uuid is always null/undefined.
It seems like the non-javascript parts of phonegap isn't loaded correctly, but I can't see exactly what. For everything outside the www directory I'm using the code provided in the sample directory of the phonegap download.
Anyone know what may be causing this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap-1.0.0.js"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#something"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
var initialize = function() {
window.console.log("deviceready||resume");
};
document.addEventListener("deviceready", initialize);
document.addEventListener("resume", initialize);
window.console.log("onBodyLoad!");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Herro World</h1>
</body>
</html>
In case someone else stumble on this problem.
I hadn't realized that phonegap-1.0.0.js is different for the iPhone and Android version. It has the same name, but the content is different. Thus, one must load the correct file. I solved it like this:
<script type="text/javascript">
// Atrocious way of loading two diffent phonegap scripts, but other loading methods won't work.
// also there shouldn't be two scripts to begin with -- so much for cross-platform.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.match(/android/)) {
document.write("<script type='text/javascript' src='javascripts\/phonegap-android-1.0.0.js'><\/script>");
} else {
document.write("<script type='text/javascript' src='javascripts\/phonegap-iphone-1.0.0.js'><\/script>");
}
</script>
If you want some function to execute when the device is ready do something like this
document.addEventListener("deviceready", onDeviceReady, true);
// PhoneGap is now ready
function onDeviceReady() {
// Write your code here
}
I am not sure why your code is not working.Try placing the document.addEventListener outside the scope of the function.