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";});
Related
I created a new Cordova 4.0 project, added android platform and added all the core plugins and the following is my index.html file.
<!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">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
alert("ready");
}
// 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.vibrate(2000);
}
</script> </head> <body>
<p>Show Alert</p>
<p>Play Beep</p>
<p>Vibrate</p> </body> </html>
But I could never see the device ready firing. Any ideas on what is wrong with the abive snippet ?
Try to change
<script type="text/javascript" charset="utf-8" src="/cordova.js"></script>
to
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
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 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 developing an android application. In that, I am trying to get the image in the javascript, but its not loading. Can someone help me to get the image in the javascript in the phone gap android app...
Code:
<img src="img/nextIcon.png" /></span>'
why the end span tag ?
Basically your file should look something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Something</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad()">
<img src="img/nextIcon.png" />
</body>
</html>
And then of course you should have included the image in a folder called img which is in you www folder
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?