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");
}
}
Related
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.
I'd like to explain what does "Javascript not working" mean, but the only thing I can do is tell that the code is never executing, and don't know how to debug.
Let's start: I'm developing a Phonegap application - in that sense, I don't have a console object to check on.
This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<title>1001Carros</title>
</head>
<body>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
adaptandose a dispositivo ...
</body>
</html>
And this is my javascript:
var app = {
// Application Constructor
initialize: function() {
switch(device.platform) {
case "iPhone":
location.href = "index-iphone.html"; break;
case "Android":
case "BlackBerry":
case "BlackBerry WebWorks":
location.href = "index-android.html"; break;
default:
location.href = "index-android.html";
}
}
};
My intention is: when the document is loaded, initialize() is called. Such method would verify the platform and redirect to the appropiate screen.
When I run my app in the emulator (which finally appends ?enableripple=cordova to my url), I get that "phonegap.js" does not exist. If that's the problem, it seems easy to explain why I'm not being redirected.
However, when I compile the application via local tools (i.e. phonegap run android) such file seems to be created in the assets directory (in android platform).
Question: How can I debug this issue? I'm using the emulator and, alternatively, a Samsung Galaxy Tab 3. I would like to debug the device and see if the problem is with the file (as it is shown in the emulator/ripple) or is it elsewhere.
It'd be great if someone with more experience could help me if they had a similar problem since it's my first phonegap application.
To answer your question about debugging, since your devices most likely don't have a console, you'll have to use alerts. I like to use alerts to test if a function is firing, if the appropriate data is being stored/passed, etc.
As for why your javascript is not working, I'm not positive but I think it has to do with you using "app". I believe that is reserved for native phonegap things, as seen in "navigator.app.exit()". I would suggest you rename the variable and try that.
I don't understand your question clearly. But i see your code has issue. In phonegap, all API device(provided by phonegap) must be call when event deviceready fired:
document.addEventListener('deviceready', function(){
// Code here
}, false);
In phonegap, support many tools to debug app now: phonegap debug, weinre is power
You can use console.log('...'), it support any device, see log in your IDE: Xcode, Eclipse,..
There are plenty of ways to debug your phonegap code on android:
logcat
Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
Chrome Remote Debugging (only Android 4.4+): https://developer.chrome.com/devtools/docs/remote-debugging
..
I am very very new to phonegap android app developing. I have configured everything after huge trying. Now I am learning to coding in phonegap.
Recently I got a javascript code for phonegap. which should display an alert notification. But it is not showing . It only shows html codes results. My code is below
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.2.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",
onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
First check if you have included the right permissions in app/AndroidManifest.xml
If it doesn't works try with this:
function onDeviceReady(){
$(document).ready(function(e) {
navigator.notification.alert("PhoneGap is working!!");
});
}
You should check docs for 2.2.0
By the other hand I recommend you tu use a newer phonegap version.
Ok.. Here are some points that you need to check:
Make sure you have included cordova-2.2.0.js file in your application
folder.
Make sure you have mentioned the correct cordova file name in your
tag. For ex., if you have included cordova-3.0.0.js in your
application folder. You should mention the same file name in your
script tag.
You can try placing the onDeviceReady() function before the onLoad()
function and check whether it makes any impact. Try placing a
console.log() in the deviceready function.
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?