why phonegap doesn't show alert notification ? (running on iPhone 5.1.1 , phonegap phonegap-2.1.0-0-g26d211b, mountain lion 10.8.2, xcode 4.4.1)
<html>
<head>
<link rel="stylesheet" href="themes/css/apple.css" title="jQTouch">
<script src="src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
try
{
navigator.notification.alert('Hello', ok, 'Title', 'Button!');
}
catch(e)
{
alert("doesn't support!!");
}
}
function ok() {}
</script>
</head>
</html>
Because you are trying to show an alert before phonegap/cordova framework is loaded.
$(document).ready(function(){ is not going to help you here, you must use this event to check if phonegap is successfully loaded:
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
// Now safe to use the PhoneGap API
}
More about this event: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
PhoneGap consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a PhoneGap JavaScript function
before it is loaded.
Related
I am having issues, it would seem, with using local files with my phonegap application. I am trying get a simple app up and running to scan a qr code and just display the text that was scanned. However, it is not working for some reason. I can run any JavaScript I want as long as it is in the index.html file. For some reason, whenever I try to call a function from an included js file, I get a reference error. In this code I am getting 'ReferenceError: scan_qr_code is not defined' and 'ReferenceError: onDeviceReady is not defined'. Both of these functions are from the main.js file which is supposed to be included from the index.html file. I downloaded and inspected the apk file and these files are being included in the build but for some reason are not working. Anyone have any suggestions or advice? This is driving me nuts. Seems like this should be a rather straight forward thing. Also, I'm building with the PhoneGap version as 3.7.0
I am using PhoneGap build for compiling and my folder structure is setup as thus.
/www
/scripts
main.js
jquery-1.11.3.min.js
/styles
main.css
index.html
config.xml
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="scripts/barcode.js"></script>
<link href="styles/main.css" rel="stylesheet" />
<title> </title>
<script>
$(function(){
alert('here');
try{
$("#scan_button").click(function(){
alert('Button Clicked 2');
try{
onDeviceReady();
scan_qr_code();
}catch(e){
alert(e);
}
});
}catch(e){
alert(e);
}
});
document.addEventListener("deviceready", function(){
try{
$("#scan_button").click(function(){
alert('Button Clicked');
try{
scan_qr_code();
}catch(e){
alert(e);
}
});
scan_qr_code();
}catch(e){
alert(e);
}
}, false);
</script>
</head>
<body>
<button id="scan_button">Scan QR Code</button>
</body>
</html>
main.js
$(function(){
});
function onDeviceReady(){
alert('Device Ready Fired');
}
function scan_qr_code(){
try{
alert('Scanning');
// Scan the QR code
barcode_app.scan(function(result){
code = result.text;
// Just grab the text from the scanned code
alert(code);
scan_qr_code(){
});
}catch(e){
alert(e);
}
}
config.xml
<preference name="phonegap-version" value="3.7.0" />
<access origin="*"/>
This is going to be a very wild guess, but it look like your main.js file has an extra { that shouldn't be there.
scan_qr_code(){
This could be breaking your code, and that's why your functions from main.js are undefined.
Here's a plunker showing that the code would run just fine if you remove the extra {. Well... barcode_app is now showing as undefined, I assume it's part of the scripts/barcode.js file, which by the way, is not included in your project structure either.
This is a page where I am attempting to load a backup from the file system if the device cannot connect
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/about.css"/>
</head>
<body>
<ons-screen>
<ons-navigator title = "About">
<ons-page id="page" font-align="center">
</ons-page>
</ons-navigator>
</ons-screen>
</body>
<script type="text/javascript">
var page = document.getElementById("page");
if(navigator.connection.type != Connection.NONE){
page.innerHTML='<iframe src="http://www.website.com/about/" style="width:100%; height:100%;"></iframe>';
}else{
page.innerHTML='<iframe src="aboutBackup.html" style="width:100%; height:100%;"></iframe>';
}
</script>
</html>
I installed the plugin using the github instructions (https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md)
I can't figure out why, but I get Uncaught TypeError: Cannot read property 'type' of undefined on line 22 where I check the connection type.
You need to add cordova.js in your file.
<script type="text/javascript" src="cordova.js"></script>
Then listen to device ready function and shot for the GOAL
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
if(navigator.connection.type=='none')
{
alert("Wait I'm offline.");
}
else
{
page.innerHTML='<iframe src="aboutBackup.html" style="width:100%; height:100%;"></iframe>';
}
}
</script>
Anything you do have to be after device ready function is fired. And without cordova.js cordova plugins won't work.
For saving canvas image to gallery i tried by creating plugin along with below piece of javascript code in phonegap, but after button click i got "Uncaught TypeError: Cannot read property 'version' of undefined at file:///android_asset/www/index.html:18"
for the code
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="SavePhotoPlugin.js"></script>
<link rel="stylesheet" href="index.css" />
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('myCanvas');
}
function share() {
var canvas = document.getElementById("myCanvas");
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
}
</script>
</head>
<body>
<div >
<IMG SRC="loadin.png" ALT="some text" WIDTH=100 HEIGHT=100>
<button class="button" id="myCanvas" onclick="share()">SAVE </button>
</div>
i tried with cordova 2.2, 2.9 for all the version the remains the same, tested on 2.3 version device. is this problem with the cordova version of device, or some other issue, please anybody point out mistake.
Latest versions of jQuery no longer support browser detection. Most recommend feature detection over browser detection these days.
You need to revert to jQuery libraries previous to 1.9, use the jQuery migrate plugin, or modify your JavaScript code referencing the browser version to something different like Modernizr.
Like already mentioned in the comment, you should run your code that accesses the device only after the deviceready event has fired.
Another problem is that you define a device variable inside your share() function. This will overwrite the cordova device object even if you run this after deviceready. So remove the line var device.
I get the following error when trying to use the TorchPluging:
file:///android_asset/www/web/index.html: Line 12 : Uncaught TypeError: Cannot read property 'Torch' of undefined
I added the plugin to config.xml (I think it has changed from plugins.xml to config.xml in the newer phonegap versions?)
The following is my entire index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Flashlight</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Torch.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function turnTorchOn(){
window.plugins.Torch.turnOn(
function() { console.log( "turnOn" ) } // success
, function() { console.log( "error" ) }); // error
}
</script>
</head>
<body>
<button id="turnOnButton" name="turnOnButton" > Turn on Flashlight</button>
<script>
$('#turnOnButton').click(function(){
alert("will turn on now");
turnTorchOn();
alert("called turnOn done");
});
</script>
</body>
</html>
It actually isn't that hard to update an older style plugin to one that will work in 2.0.0+. You would need to:
Modify the JS to the new cordova.define() style of declaring plugins.
Update the package reference to org.apache.cordova.* from com.phonegap.* in the Java code.
Make sure you are not calling any deprecated API's.
I've written a couple of blog posts that cover the topic. If you do follow them an update the Torch plugin you should submit a pull request so everyone can enjoy your work.
2.0.0 Plugin - http://simonmacdonald.blogspot.ca/2012/08/so-you-wanna-write-phonegap-200-android.html
Deprecated API's - http://simonmacdonald.blogspot.ca/2012/07/phonegap-android-plugins-sometimes-we.html
I'm just in the middle of implementing some Jasmine tests for a jQuery mobile application I'm working on, I've run into an error that I managed to track down to adding the jQuery mobile library, the error is as follows:
Jasmine.js:1769 TypeError: Cannot read property 'abort' of undefined.
As soon as I remove the jQM dependency, the error goes away.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5/Common/Tests</title>
<!-- LOAD STYLES FIRST -->
<link type="text/css" rel="stylesheet" href="libs/jasmine.css" media="screen">
<link type="text/css" rel="stylesheet" href="../../Common/libs/jquery.mobile-1.0.1.css" />
<!-- LOAD JASMINE LIBRARIES -->
<script type="text/javascript" src="libs/jasmine.js"></script>
<script type="text/javascript" src="libs/jasmine-html.js"></script>
<!-- LOAD DEPENDENCIES -->
<script type="text/javascript" src="../../Common/libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../Common/libs/jquery.mobile-1.0.1.min.js"></script>
<!-- LOAD CODE TO TEST -->
<script type="text/javascript" src="../../Common/libs/myLib.js"></script>
<!-- LOAD ACTUAL TESTS -->
<script type="text/javascript">
describe("Suite 1", function() {
it("Should be that 1 equals 0", function() {
expect(0).toEqual(1);
});
});
</script>
</head>
<body>
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>
I'd prefer to use Jasmine for this application instead of qUnit as I think its more flexible and easier to implement in CI and explain to the BA's and PM's.. however after tinkering with this problem for a couple of hours and some futile searches on google I still havent been able to solve it so I'm starting to consider moving on.
Before I do though, has anyone experienced this same problem and found a solution for it?
Thanks and Regards.
UPDATE 20 March:
Ticket is in github Jasmine project:
https://github.com/pivotal/jasmine/issues/204
I was able to have jasmine test of jquery mobile scripts using jasmine-jquery.
The trick is that you need to disable the jquery mobile enhancement on DOMready because it will try to enhance the html of jasmine runner.
You can do it with this script inserted in the head of the html runner file:
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
Then you need to trigger the enhancement of jquery mobile on the html inserted from your fixture (the jasmine-jquery functionnality):
describe('my test', function(){
beforeEach(function() {
loadFixtures("fixtures/MYFixture.html");
$("#jasmine-fixtures").attr("data-role","page").trigger("create");
}
it( ...
});
Try disabling both auto-initialization and hash-listening:
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.hashListeningEnabled = false;
});
</script>
Then add the jqm page to the jasmine-jquery fixture, and initialize the page:
beforeEach(function() {
jasmine.getFixtures().set('<div data-role="page"></div>');
$.mobile.initializePage();
});