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>
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 am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
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 got a Phonegap (Cordova 2.0.0) app, built for Android, running with jQuery Mobile + Backbone.js. When I test it on the emulator, it works correctly (runs as in the browser, CSS and JS appear, etc).
When I sign it and install it on a non-debug device, it runs but without the CSS and JS (so basically shows an unstyled HTML document which doesn't run the JS).
The body of my app is as follows:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="libraries/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<script type="text/javascript" charset="utf-8" src="libraries/cordova-2.0.0-ios.js"></script>
<script src="libraries/jquery-1.7.2.min.js"></script>
<script src="libraries/underscore.js"></script>
<script src="libraries/backbone-min.js"></script>
<script src="libraries/backbone.localStorage-min.js"></script>
<script src="libraries/detect.js"></script>
<script type="text/javascript" src="libraries/sha1.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var jqmReady = $.Deferred();
var deviceReady = $.Deferred();
/**
* on load - manages dependency between jquery mobile and phonegap
*/
function onBodyLoad()
{
// get device
$.os = {};
$.os.android = navigator.platform.indexOf("android")>=0;
$.os.ios = navigator.platform.indexOf("iPhone")>=0 || navigator.platform.indexOf("iPad")>=0;
// listen to device ready
if ($.os.android || $.os.ios) {
document.addEventListener("deviceready", deviceReady.resolve, false);
}
else {
// must be in a browser, so immediately resolve
deviceReady.resolve();
}
}
$(document).bind("mobileinit", jqmReady.resolve);
$(document).bind("mobileinit", function() { console.log('mobileinit'); });
$(document).bind('pageinit', function() { console.log('pageinit'); });
// when jquery mobile and device ready, then fire
$.when(jqmReady, deviceReady).then(function() {
console.log('Ready');
// disable push state: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
$.mobile.pushStateEnabled = false;
App.init();
});
onBodyLoad();
</script>
</head>
<body onload="" data-lat="" data-lng="">
Has anyone come across this before? I was wondering if it's something to do with the relative paths (rather than absolute?) or how I package it together in Eclipse. Also, on an iPhone it works fine.
Thanks.