JayData / Phonegap works in iPad Simulator but not iPad device
Question
I am doing a proof of concept app using the the following blog as code base.
http://jaydata.org/blog/how-to-check-if-your-websql-environment-is-working
When I run the following in iPad 6.1 Simulator using XCode 4.6.1, I can see the expected output.
[LOG] Received Event: deviceready
[LOG] begin testing
[LOG] define Department Entity
[LOG] define Employee Entity
[LOG] saving Entity done.
But when I run the following to an actual iPad device via USB, its output ends at "define Department Entity". I don't see any errors; here are the console.log outputs:
[LOG] Received Event: deviceready
[LOG] begin testing
[LOG] define Department Entity
Any help would be much appreciated.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<!--jQuery-->
<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<!--jayData and the different providers used-->
<script type="text/javascript" src="js/JayData-1.2.7.1/JayData.js"></script>
<script type="text/javascript" src="js/JayData-1.2.7.1/jaydataproviders/SqLiteProvider.js"></script>
<!--PhoneGap-->
<script type="text/javascript" src="cordova-2.5.0.js"></script>
</head>
<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-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var jqmReady = $.Deferred(),
pgReady = $.Deferred();
// mobileinit does not work. pageinit works.
// jqm ready
$(document).bind("pageinit", jqmReady.resolve);
// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);
// all ready :)
$.when(jqmReady, pgReady).then(function () {
console.log('begin testing');
console.log('define Department Entity');
$data.Entity.extend("$org.types.Department",
{
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Employees: {
type: Array,
elementType: "$org.types.Employee",
inverseProperty: "Department"
}
});
console.log('define Employee Entity');
$data.Entity.extend("$org.types.Employee",
{
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Department: { type: $org.types.Department, inverseProperty: 'Employees' }
});
$data.EntityContext.extend("$org.types.OrgContext", {
Department: { type: $data.EntitySet, elementType: $org.types.Department },
Employee: { type: $data.EntitySet, elementType: $org.types.Employee }
});
$org.context = new $org.types.OrgContext({
name: "webSql", databaseName: "OrgDatabase",
dbCreation: $data.storageProviders.DbCreationType.DropTableIfChanged
});
var department = new $org.types.Department({ Name: 'Department1' });
var employee = new $org.types.Employee({ Name: 'John Smith' });
department.Employees = [employee];
$org.context.onReady(function () {
$org.context.Department.add(department);
$org.context.saveChanges();
});
console.log('saving Entity done.');
});
</script>
</body>
</html>
2 answers
solution1
2 2013-03-19 12:03:16
answered on jaydata forum, but I copy here, maybe somebody else will search for this
important points: 1. use jquery 1.8+, 1.7 is not supported. if you must use 1.7 then please use q promise, tell us if you have any problems 2. unfortunatelly you can subscribe to deviceready event after onload event only....
this code works for us on ipad 6.1
(function main() {
var jqmReady = $.Deferred();
var pgReady = $.Deferred();
// mobileinit does not work. pageinit works.
// jqm ready
$(document).bind("pageinit", jqmReady.resolve);
// phonegap ready
$.when($.ready)
.then(function(){
document.addEventListener("deviceready", pgReady.resolve, false);
});
var Employee = $data.define('Employee', {
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Department: { type: "Department", inverseProperty: 'Employees' }
});
var Department = $data.define('Department', {
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Employees: { type: Array, elementType: "Employee", inverseProperty: 'Department' }
});
var OrgDatabase = $data.EntityContext.extend('OrgDatabase', {
Departments: { type: $data.EntitySet, elementType: Department },
Employees: { type: $data.EntitySet, elementType: Employee }
});
var context = new OrgDatabase({name: 'webSql', databaseName: 'OrgDatabase', dbCreation: $data.storageProviders.DbCreationType.DropTableIfChanged});
// all ready :)
$.when(jqmReady, pgReady, context.onReady()).then(function () {
var employee = new Employee({ Name: 'John Smith' });
var department = new Department({ Name: 'Department1' });
department.Employees = [employee];
context.Departments.add(department);
context.saveChanges(function() {
alert('saving Entity done.');
});
});
})()
solution2
0 2013-03-19 18:13:47
I used Web Inspector and found out the app on iPad could not load "JayData.js".
It turns out the actual js file has a filename with all lowercase characters. Thus, the fix is to change "JayData.js" to "jaydata.js", and the app works on iPad.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.