The deviceready isn't firing correctly (at least in iOS) for my cordova project. I have searched for hours and still cannot figure this out. Am I doing something incorrectly? The path to js/cordova.js exists as well:
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script type="text/javascript">
// Fastclick
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
<script type="text/javascript" charset="utf-8" src="js/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() {
alert("ready");
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
I'm not sure what I'm missing as I'm not getting any errors if I inspect in Chrome
There's no need to have the cordova.js inside your www/js/ folder because that file is copied from another location to platforms/ios/platform_www (i.e. by running: cordova build ios) at the same level that the index.html file, so in order to have a proper configuration, the next statement:
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
must be changed to:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
deviceready event is essential to any application. It signals that Cordova's device APIs have loaded and are ready to access.
Update
So I got "deviceready" to work by removing the onload="onLoad()" from the body and replacing this:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
with just this:
document.addEventListener("deviceready", onDeviceReady, false);
I had the same problem, my solution was to add :
<script type="text/javascript" src="cordova.js"></script>
in the HTML file and everything worked perfectly
I had this same issue, but in my case cordova.js was already properly included.
Eventually what worked for me was a simple remove and add of the ios platform:
cordova platform remove ios
cordova platform add ios
It had been quite a while since I had completely re-built the ios platform and other major changes had taken place during that time (Cordova upgrade, XCode upgrade, etc). It's possible that my config.xml or existing ios build was somehow incompliant with the latest Cordova requirements.
Related
I am developping a web app for iOS and Android, using the last version of PhoneGap.
I want to send Notifications to the users on their phone's status bar, and I cannot figure out how to do that.
It seems that there was a Cordova plugin (StatusBarNotification) that once existed, but all the links I find are dead.
If anyone knows a way to send notif to the statusbar, I would be grateful.
Thanks
Quentin
EDIT : I should have been more specific : I am trying to understand how to use the status area on phones (http://developer.android.com/guide/topics/ui/notifiers/notifications.html), and for that I have a simple html file with a button. I want a notification to appear on the status area when I click the button. (like when you receive a text message, you have a notification).
<!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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<input type="button" value="Notiiiiiiif" id="btNotif"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
btNotif = document.getElementById('btNotif');
btNotif.addEventListener('click', function(){
//There I want a notif to appear in the status bar
});
</script>
</body>
</html>
I am testing this app on my Nexus 4, with Android 4.4.2.
EDIT : I ended up using Google Cloud Messaging (gcm) for android devices and Apple Push Notification (apn) on my node server. This works pretty well with android devices, a bit harder for iphones
Perhaps its already to late for the answer, but I think this would make sence for your furhter work with notifications in PhoneGap. For using StatusBarNotifications in latest versions of PhoneGap (v3.x), you need to a proper Plugin that will work. This should be installed with Cordova CLI.
For the older versions of PhoneGap (v2.9 and below) you still can use DEPRECATED version of StatusBarNotifications from GitHub.
By the way, using of older version is less headache for not experienced developers :)
Hope this will help you.
I've installed the latest PhoneGap version (3.3), packaged my Mobile Services HTML application and hit the known authorization issue:
Login is only supported from http:// and https:// URLs. Please host your page in a web server
I've searched internet for this issue (http://social.msdn.microsoft.com/Forums/windowsazure/en-US/a2386093-73cd-44fb-a418-4fa83a36c800/phonegap-apps-using-the-new-html-client-for-azure-mobile-services-is-not-working?forum=azuremobile) but the solution does not work for me. The project created by phonegap references <script type="text/javascript" src="phonegap.js"></script> but even when i changed it to <script type="text/javascript" src="cordova.js"></script> it does not work.
Is there any solution for this issue?
My source code:
<html>
<head>
<meta charset="utf-8" />
<title>Report</title>
<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" />
<script type="text/javascript" src="cordova.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.1.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="myscript.js"></script>
</head>
myscript.js
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var client = new WindowsAzure.MobileServiceClient(
"https://myapp.azure-mobile.net/", "XXX");
client.login("google").done(....
},
};
$(document).ready(function documentReady() {
app.initialize();
});
Edit 21.12.
Apparently PhoneGap 3 does not report its version in window.device.cordova anymore where Mobile Services checks it. But even faking it did not help - after authorization on Google, it goes to empty page.
The version issue has been fixed recently with an update to the device core plugin.
device.cordova.version should correctly state what version you are running.
So if you intended to do a work around with it, you might be able to do it now.
I'm trying to create a phonegap application in IOS. I had successfully created the project, when running the same application created is being running perfectly, when changing to my code its not detecting any javascript event except alert().
document.addEventListener('deviceready', function(){}, false);
console.log("I'm working");
These functions are not working in Xcode and in iOS device or emulator.
The same application which i created is working fine in android.
Please help me out to fix the issue.
I can't begin to guess as to why this would work in Android but not iOS. Are you sure you are including in the head of your html pages? The "deviceready" listiner will not work without it. Everything else looks fine though. The phonegap documentation show the below code:
<!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">
// 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 APIs
****For testing purposes, add an alert() here to ensure it is working.****
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I'm using phonegap to build an enyo app. My program works completely fine in chrome and it also works in the ripple emulator service for blackberry. My problem is, when I use the .ipk build for webOS and the .apk build for android, I get the same error:
Not allowed to load local resource: file:///usr/palm/enyo.js
Uncaught ReferenceError: enyo is not defined, package.js:1
Uncaught ReferenceError: enyo is not defined, tests/package.js:1
Uncaught ReferenceError: enyo is not defined, index.html:10
This leads me to think that it must be a problem in my index file, which is:
<!DOCTYPE html>
<html>
<head>
<title>Enyo Bootplate App</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- look this up for blackberry ad error -->
<!-- css -->
<link href="build/enyo.css" rel="stylesheet">
<link href="build/app.css" rel="stylesheet">
<!-- js -->
<script src="enyo/enyo.js"></script>
<script src="phonegap.js"></script>
<script src="source/mobile.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.blackberry.com/app_includes/asdk/adBanner.js"></script>
<script src="source/gameBanks.js" type="text/javascript"></script>
<script src='https://cdn.firebase.com/v0/firebase-auth-client.js' type='text/javascript'></script>
<script src="https://static.firebase.com/v0/firebase.js" ></script>
<script src="build/enyo.js" ></script>
<script src="build/app.js" onerror="alert('No application build found, redirecting to debug.html.'), location='debug.html';"></script>
</head>
<body class="enyo-unselectable">
<script>
new App().write();
</script>
</body>
</html>
The weird thing is that index.html:10 is a comment (the css comment) so I have no idea how an error could possibly be there. Anyone have any idea why I would be getting this error? Or perhaps what "file:///usr/palm/enyo.js" is? That's not a file in my package.
Also, after messing around with it a bit, adding lines at the top of index.html doesn't change where the error is (index.html:10) so is it possible that the error is referring to some other form of index.html? I went through my commits at github and at no point in time was there anything other than comments at line index.html:10.
Update:
When using any other service to package the apps such as palm-run, it updates my code properly. My builds downloaded off of phonegap are not working properly. Is there any reason why phonegap's build specifically would cause this problem?
Finally solved this problem, phonegap was somehow finding the wrong index.html files. When I downloaded the enyo bootplate, there were some index.html's deep within the api and tools folders. After I removed those, it worked properly.
Strange...not sure what is causing that, but I do see you are trying to load enyo.js twice. I doubt that that is the issue, but it is something you want to clear up.
If you start with the base bootplate project with no changes, does it work to package an ipk/apk?
I'm having real trouble with PhoneGap in the iPhone with the events. The app is running pretty smooth in my android device, but on my iPhone it doesn't anything. For example, a simple code like this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta charset="utf-8">
<title>WayAcross Mobile Application</title>
<link rel="stylesheet" href="css/jquery.css" />
<link rel="stylesheet" href="css/screen.css" />
<link rel="stylesheet" href="css/login.css" />
<script type="text/javascript" charset="utf-8" src="jquery/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile.js"></script>
<script type="text/javascript" charset="UTF-8" src="javascript/mainJavascript.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap.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 make calls PhoneGap methods
//
function onDeviceReady() {
// Now safe to use the PhoneGap API
alert('ready');
}
</script>
<script type="text/javascript" charset="utf-8" src="javascript/phonegap.js"></script>
</head>
<body onload="onLoad()">
(this is a code example that doesn't work with iPhone and works with android).
I think its a problem with the events, but I'm not sure. Even the code examples in PhoneGap docs don't work.
My environment is:
Mac OSX 10.7.1
Xcode 4.1
PhoneGap 1.1
jQuery Mobile 1.0RC
The only thing that it shows me is this: http://cl.ly/0h462Y2D2F0J0B1B0q1M
Thanks in Advance.
Regards,
Elkas
By the way, I've installed OSX Lion 10.7.2 and Xcode 4.2 now. Even in the IOS5 its not working. This is driving me crazy!!!
Even with this simple code is not working.
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Device Ready Example</title>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
alert('Hello World');
}
</script>
<script type="text/javascript" charset="utf-8" src="javascript/phonegap.js"</script>
</head>
<body>
</body>
</html>
try putting the addevent listener under document.ready like this.. worked for me for the same problem.
$(document).ready(function(){
document.addEventListener("deviceready",function(){
},false);
});
Problem Solved!!
I run the application without the phonegap.js and it created me a new one. I just changed the name of it to the the one i was loading and the application finally works.
When creating a Phonegap installation for iOS a specific version of the (ie) phonegap.1.4.1.js is used.
Replacing just this file with a newer version (like cordova.1.8.0.js) resulted in alerts not working.
If you want to upgrade to a newer Phonegap version you will have to "redo" your project.
I reverted back to phonegap.1.4.1.js and the events magically started to work again.
Sort of a wild guess here, not sure how you compile this thing into an app but you list XCode so.... The markup points to script files in folder jquery/ and javascript/. When compiling an app with XCode files are not placed in the actual folders that represent the group folders you normally use. In order for the files to actually end up in a directory inside the app you need to to add the folder on your harddrive as a folder reference (they show up as blue folders, not yellow).
The easiest way to check if this is the problem is to just remove the folder path of the script includes to just be the name of the file.
function testDialog() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.notification.alert("This is message", function(){}, "HaHa", "Done");
}
}