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.
Related
I'm trying to load data to my index file remotely. I am able to do it locally with:
<body id="chk">
<script>
$(function(){
$('#chk').load('a.html');
});
</script>
</body>
Which works flawlessly but it is really no use to me as I can't update the a.html file remotely. What I'm looking to achieve is something like this:
$(function(){
$('#chk').load('ftp:/chkblabla.com/public_html/a.html');
});
But of course this doesn't load my data. Can it be done any other way? At the end, my goal is to load some string values to my app without having to make another build (Cordova).
You say "of course this does not load my data", but you don't explain why. Are you able to see javascript errors?
I'm always recommending to use adb to see the errors and warnings which come from the javascript engine: (at least for Mac OS)
adb logcat -v time | grep SystemWebChromeClient
If the problem is related to accessing external site, you will have to adapt your index.html at the line starting with
<meta http-equiv="Content-Security-Policy"
EDIT
I am not sure if this is relevant for you or not. A project I was developing two years ago was including this code:
<!-- include JQ, enable PhoneGap events under JQM, then include JQM -->
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$( document ).on( "mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.phonegapNavigationEnabled = true;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
HTH...
I'm newer to cordova, and start by using cordova 5.0.
I configured the environment, and created an instance from CLI, and run it on an android device:
cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add android
cordova run android
After the above four instructions, I created an instance, and got it run on my android phone.
My Coding Effort:
The instance consists of a www folder, and I thought I should work on that.
Ok, I tried to change the index.html markup, everything goes well and got display.
But when I tried to add a piece of javascript embed in the html, I found it doesn't work:
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
alert('hello world!');
</script>
</body>
Then, I change my method, I create a site.js and import it, then do the alert in it, I works!
index.html:
<body>
<!-- ... -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</body>
site.js:
alert('Hello world!');
I felt it strange, and curious about why it act in such a way.
I found the docs and google it, both with no luck.
So I turn for your help.
My Question
What's the reason the embed script has no effect, is it ok?
How should I code under such a situation? How to place my script is safe?
There are no problems with cordova 5, I use it in several projects. Cordova is event driven, which means that you have to call all of your logic after cordova tells you, that it is ready.
You put your logic, the alert thing, in the HTML-Body, which means, that you have no guarantee, that it is called after cordova is ready.
The most important thing in your project is, that you have this few lines of code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
}
If you want to have a simple alert in your project, the code is:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Hi fish_ball");
}
Maybe that 3.6 ist faster on your device, who knows? But this is the only way, which is working.
I don't know what is inside your index.js, If it is the one you got from the cordova installation, then there you will find the event handler for the deviceready thing.
Come on, it is not difficult. Your structure is:
<html>
<head>
<script src="cordova.js">
<script src="yourScript.js">
<head/>
<body>
<body>
In your «yourScript.js» you put the code above.
For the last time: Don't put Javascript into HTML until you are not sure, that cordova is loading or more general: Don't use Javascript outside the deviceready-function.
I could be something to do with browser rendering. I have a script, not "alert) but document.write()". The script works. I have not tried the app in Android or iOS but only in the browser. have a look at the enclosed image.
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 am using cordova 2.1.0 for IOS/app development. I want to make only one index.html for both IOS and android. So, i wanted to include the following statement for android and exclude for IOS in index.html :-
<script type="text/javascript" src="iscroll.js"></script>
What is the condition i should give such that this statement runs for android and skips for IOS.
Thanks in advance.
device.platform allows you to filter content based on platform.
function init() {
if(device.platform =="Android"){
$("script").attr("src", "iscroll.js").appendTo("head");
}
document.addEventListener("deviceready", onDeviceReady, false);
}
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");
}
}