Clearly, I am new to Cordova. I cannot get the simplest of Cordova notification examples to work.
Getting cordova
npm install cordova
cordova create hello com.example.hello "HelloWorld"
cordova add platform ios
cordova prepare
Getting plugin
cordova plugin add org.apache.cordova.dialogs
index.html from the documentation
<!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() {
// Empty
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alertDismissed
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
</script>
</head>
<body>
<p>Show Alert</p>
</body>
</html>
Clicking on the Show Alert link produces nothing in either the Xcode emulator or on an actual device. What simple thing am I missing?
Related
I am trying to use the cordova-app-preferences plugin.
$( document ).ready(function() {
alert("doc ready");
function ok (value) {
alert("prefs.fetch value: "+value);
}
function fail (error) {
alert("prefs.fetch error: "+error);
}
var prefs;
try {
prefs = plugins.appPreferences;
}
catch (e) {
alert("can't find plugins.appPreferences");
}
prefs.fetch( ok, fail, "mode");
});
This fails (catch). When I step using Safari debugger, plugins is undefined. I am running this on my iPhone XS cordova run ios --device, cordova version is 8.0.0.
The redacted version of my html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<title>Login</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
So the question is: what am I missing to get a reference to plugins.appPreferences?
UPDATE:
The problem seems specific to this plugin. To replicate,
cordova create plugin-test com.mydomain.ptest PLUG
cd plugin-test
cordova plugin add cordova-plugin-app-preferences --save
cordova platform add ios
cordova run ios --device
(fails, need to specify code signer in xcode.)
cordova run ios --device
This time it builds and runs. If I open Safari debug window, cordova.plugins is null.
Now, if I add another plugin (eg. phonegap-plugin-barcodescanner) and run it again, cordova.plugins exists, but only contains barcodescanner.
Well, this is strange, but I discovered that this particular plugin registers itself at runtime using windows.plugins while the others that I've looked at use cordova.plugins.
I want to use sqlite db for my iOS application using phone gap. I add sqlite plugins, linked sqlite libraries. Did everything correct, when I run my app in emulator iOS 6.1, it launches fine but not giving any alert, I want to display on db success etc. Also I don't know if database is created successfully, where can I find that db file. Here is my code. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>Storage Example</title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lawnchair.js"></script>
<script type="text/javascript" charset="utf-8" src="js/SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Lawnchair-sqlitePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
alert("correct");
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
// Populate the database
//
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS DEMO');
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}
// Transaction error callback
//
function errorCB(tx, err) {
alert("Error processing SQL: "+err);
}
// Transaction success callback
//
function successCB() {
alert("success!");
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Database</p>
</body>
</html>
The cordova.js file is normally in the <project_name>\platforms\android\assets\www directory.
You have shown it to be in <project_name>\platforms\android\assets\www\js as per your code.
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
You need to check the correct path of your cordova.js file. If it is in www directory than you need to change the script tag as below.
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
Is the onDeviceReady() function being fired?
is the alert("correct") being called?
I am trying to develop a simple audio player. Following the tutorials from the web and also in stackoverflow, I am able to make the audio player work.
Working (without Jquery mobile script header):
<title>Media Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
var my_media = null;
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
}
// Audio player
// Play audio
//
function playAudio(src) {
//some code here
}
// Pause audio
//
function pauseAudio() {
//some code here
}
// Stop audio
//
function stopAudio() {
//some code here
}
</script>
One enhancement I made after reading through this site is to place the
var my_media = null;
before onDeviceReady()
The problem:
Since I want to implement this audio player in Jquery Mobile, so I added the Jquery Mobile scripts into the header like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
<title>Media Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
var my_media = null;
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
}
// Audio player
//
// code truncated for simplicity
Unfortunately, after adding Jquery mobile script header, Eclipse log shows:
Uncaught ReferenceError: Media is not defined
So, I am suspecting the problem is the header script launching sequence.
The question is, how and where to insert Jquery Mobile script in the header in order for Phonegap media to work?
There is another thread on this issue, which still has no answer. Appreciate the help.
Edit:
I have traced down the triggering problem. Apparently, when I add this Jquery-mobile header
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
Music wouldn't play due to media undefined error.
Alright, although there is no direct solution, somehow I got the inspiration from here: jQuery Mobile & PhoneGap deviceReady() not fired
My Jquery mobile + Phonegap audio player works well after the following modifications:
1) Load cordova.js first
2) Followed by jquery mobile.css, jquery.js and jquery mobile.js
3) The main problem is, which I think is, I mixed cordova firing process together with audio player's functions. When I separated cordova firing process as a standalone block script and audio player functions as another block of script, it works brilliantly.
Below is my code for reference:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Media Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
<script type="text/javascript" charset="utf-8">// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
}</script>
//Cordova firing process and audio player function script declarations are separated.
<script type="text/javascript" charset="utf-8">
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
//some code here
}
// Pause audio
//
function pauseAudio() {
//some code here
}
// Stop audio
//
function stopAudio() {
//some code here
}
</script>
</head>
Thanks for the visit of my question and also Omar for the replies.
I have implemented a basic example with phonegap for android in eclipse. Than i went with ios environment. I have downloaded the cordova plugin and created a new project. Then i replaced www folder with the www folder that i have created for android. The index html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=content-type content=text/html charset="utf-8">
<title>navigator.network.connection.type Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
// document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function helloworld() {
console.log('phone gap log...');
alert('Hello World');
}
</script>
<script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
</head>
<body background="login.png">
<img alt="" src="login_logo.png" STYLE="position:absolute;LEFT:25px">
<form STYLE="position:absolute;TOP:175px; LEFT:65px; WIDTH:100px; HEIGHT:50px" >
Kullanıcı Adı:<br> <input type="text" id="uname" ><br>
Şifre:<br> <input type="text" id="pword"><br>
</form>
<button type="submit" onclick="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
</body>
</html>
the style of the screen is same as with android. But when i pressed the submit button, i have got no action or no log in xcode or ios simulator. But it works on android and on eclipse. Why my simple code does not work on ios environment?
The onclick event isn't reliable in the Web View. You need to use ontouchstart or another event listener instead. The Apple Documentation lists the supported touch events.
So in your case you would have to change the button to something like this:
<button type="submit" ontouchstart="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
I have an application developed on iOS & Android using phonegap 1.6.0 & JQM 1.1.0.
Now i have used the same code for blackberry. I am having many pages within a single HTML. I just keep on changing the pages. But the issue which i am facing is that, Device ready is fired everytime i perform a changePage(). This doesn't happen in iOS and Android... Why is it happening?
Below is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width,height=device- height,initial-scale=1.0,user-scalable=no">
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
//---------------------------------------------------------------------
// Cordova event listeners
//---------------------------------------------------------------------
function onDeviceReady() {
alert("Inside Device Ready");
}
// register Cordova event listeners when DOM content loaded
function init() {
console.log('init()');
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
<title>Cordova API Sample</title>
</head>
<body onload="init()">
<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>
<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>
About Me
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Back Home
</div>
</div>
</body>
</html>
In this you have to create one more js file for the on device ready.
To call your function in to this file
for new js file code i below.
//---------------------------------------------------------------------
// Cordova event listeners
//---------------------------------------------------------------------
function onDeviceReady() {
alert("Inside Device Ready");
}
// register Cordova event listeners when DOM content loaded
function init() {
console.log('init()');
document.addEventListener("deviceready", onDeviceReady, true);
}
call this script when you require.
like this
There was a bug in my 9800 simulator. I re-installed it and it worked.