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?
Related
until now I was not using this index.js that Phonegap recommends :
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
Where should I put my own js functions and events (all my js file), into this, out of this, in another file ?
Where should I call those js files and where should I call the app.initialize, in relation to the position of the calls to the js files ?
Here's my html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/boardDims.js"></script>
<script src="js/functions.js"></script>
<!-- <script src="cordova.js"></script>-->
</head>
<body>
For now I am compiling using the remote service : $ phonegap remote run android
It would be really useful to have a default template of an app using Phonegap + JQM, for beginners like me ;-)
That index.js is included as an example, you don't really need to use it. It is basically showing you how to work with ondeviceready. You need to use ondeviceready when you work with plugins, since most of their calls will only be available after ondeviceready has been fired. So you hook up your calls to plugins on a listener to ondeviceready. I am doing it like this for instance:
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", MYAPP.events.onDeviceReady, false);
}
</script>
</head>
<body onload="onLoad();">
And inside MYAPP.events.onDeviceReady I do the calls to geolocation, camera, or whatever plugin I'm working with.
BTW, two important things to notice in you example: You need to include cordova.js before you can access ondeviceready or work with any plugin, plus you are including index.js twice. Perhaps you duplicated the <script src="js/index.js"></script> to edit it and include js/cordova.js and forgot to change the name/path?
Apart from that, what I do is separating the app's JS and the external libs in two separate directories for better organisation, like "lib" and "js", so you would include "js/functions.js" and "lib/jquery.js".
I include both the libs and custom JS files at the bottom of the body tag for a slight better performance: Where should I put <script> tags in HTML markup?
And I name the files under "js" (custom JS files for the app) according to their purpose/content, like: events.js, models.js, settings.js, util.js, ... You can see in the snippet above that I have "namespaced" my custom JS objects under the capitalised name of the app, so everything in util.js will be called like: MYAPP.util.formatDate().
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 am developing an iPad application with PhoneGap and jQueryMobile and Kinvey's Javascript method for data storage. It's working fine in simulator and I am not able to get it working in the iPad. I am attaching the index.html code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="jquery.mobile-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.theme-1.1.0.css"/>
<link rel="stylesheet" href="datetime/jquery.mobile.datebox.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="datetime/jquery.mobile.datebox.min.js"/>
<script async src="kinvey-js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
if(typeof Kinvey != 'undefined')
{
alert('Kinvey is there');
}
else
{
alert('Kinvey is not there');
}
});
</script>
</head>
<body>
Test
</body>
</html>
I am getting the alert message "Kinvey is there", when I run on simulator and I am getting the alert message "Kinvey is not there" on my iPad.
Have you tried loading the library non-async?, change
<script async src="kinvey-js.js"></script>
to:
<script type="text/javascript" src="kinvey-js.js"></script>
Since you're not pulling the library from our AWS bucket you don't need to load the library async. See if this helps make the loading more predictable.
I'm struggling to integrate Cordova(=Phonegap) with Ember.js, and jQuery Mobile. Ember.js + jQuery Mobile works fine, as loading index.html in any desktop browser successfully loads the app.
Using xCode 4 and the iPhone 5.1 simulator, it doesn't show any content within handlebar tags. Which means Ember.js fails to load.
index.html:
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>
<body>
<script type="text/x-handlebars" data-template-name="main">
this text is NOT displayed
</script>
<div> this text IS displayed </div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/jquery.mobile.js"></script>
<script src="js/vendor/ember.js"></script>
<script src="js/app/app.js"></script>
<script src="js/vendor/cordova-1.5.0.js"></script>
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
function preventBehavior(e){
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
document.addEventListener("deviceready", onDeviceReady, false);
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady(){
// do your thing!
}
</script>
</body>
</html>
Found the problem. XCode was reporting:
ERROR whitelist rejection: url='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css'
Following this, I added *.jquery.com to the ExternalHosts array, within Cordova.plist.
My phonegap OnDeviceReady event is firing on the first page of my app, but doesn't fire when I go to the second page. I am including sample code for both pages. Note, that if I rename the second page to index.html, it will fire the OnDeviceReady, it just doesn't work if I navigate to the page through another page.
I am using the BlackBerry 9550 Emulator, and Phonegap 0.9.6
Here is the code for the first Page
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no">
</head>
<script type="text/javascript">
var scrollView;
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("OnDeviceReady");
}
</script>
<script src="phonegap.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>
<body onload="onLoad()" background-color="white">
<h1><a href="index2.html" >GoToIndex2</a></h1>
</body>
</html>
Here is my second Page:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no">
</head>
<script type="text/javascript">
var scrollView;
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("2: OnDeviceReady");
}
</script>
<script src="phonegap.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>
<body onload="onLoad()" background="white">
<h1><a href="index.html" >GoToIndex 1</a></h1>
</body>
</html>
Which BlackBerry OS are you using? The PhoneGap documentation for deviceready points out that it doesn't work in 4.6 and suggests a workaround.
I took the sample from PhoneGap version 1.0.0, it was working fine till I added the sencha script file then it didn't work anymore
<script src="json2.js" type="text/javascript"></script>
<script src="phonegap.1.0.0.js" type="text/javascript"></script>
<script src="sencha.js" type="text/javascript"></script>