I'm new to Blackberry. I use phonegap to create cross platform applications. I'm trying websql on blackberry using phonegap. My html file looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" charset="utf-8">
var db= openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS COMPANY (id unique, log)');
tx.executeSql('INSERT INTO COMPANY (id, log) VALUES (1, "Unisys")');
tx.executeSql('INSERT INTO COMPANY (id, log) VALUES (2, "UGSI")');
tx.executeSql('INSERT INTO COMPANY (id, log) VALUES (3, "TCIS")');
tx.executeSql('INSERT INTO COMPANY (id, log) VALUES (4, "mobcomp")');
msg = '<p>Log message created and row inserted.</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM COMPANY', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>
This code is working fine with ANDROID. But on Blackberry the simulator is not displaying anything except the status message line.
Can anyone please help me on this issue?
Thanks in advance,
Akshatha
Blackberry 5.0 don't support HTML5 WebSQL, instead uses Google Gears API
http://code.google.com/intl/es-ES/apis/gears/api_database.html
Related
I'm using the GAPI v4 endpoint to access google sheets, I've used the example from the Google quickstart and get a 404 error of Requested entity was not found. Why would this be happening, it shouldn't be happening since I've used their example, my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Application Conversion Viewer</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
new Vue({
el: '#app',
mounted () {
var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
apiKey: 'MY-KEY',
clientId: 'MY-CLIENT-ID',
discoveryDocs: 'https://sheets.googleapis.com/$discovery/rest?version=v4',
scope: 'https://www.googleapis.com/auth/spreadsheets.readonly'
}).then(function () {
console.log('SUCCESS')
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, function(error) {
console.log(error)
appendPre(JSON.stringify(error, null, 2));
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listMajors();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* #param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
/**
* Print the names and majors of students in a sample spreadsheet:
* https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
*/
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
range: 'Class Data!A2:E',
}).then(function(response) {
var range = response.result;
if (range.values.length > 0) {
appendPre('Name, Major:');
for (i = 0; i < range.values.length; i++) {
var row = range.values[i];
// Print columns A and E, which correspond to indices 0 and 4.
appendPre(row[0] + ', ' + row[4]);
}
} else {
appendPre('No data found.');
}
}, function(response) {
appendPre('Error: ' + response.result.error.message);
});
}
console.log('LOAD')
handleClientLoad()
}
})
</script>
</body>
</html>
I've tried several approaches to get this to work, neither of which work. The quickstart seems to be wrong: https://developers.google.com/sheets/api/quickstart/js
So as I'm not knowledgeable about jQuery and JavaScript I'm following the simpler method of using an array to build a table with Tablesorter. However, this is not working at all. In fact, even if I use the example provided (here: http://mottie.github.io/tablesorter/docs/example-widget-build-table.html) there is no result just a blank webpage. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing Tablesorter (fork)</title>
<!-- load tableSorter theme -->
<link href="./includes/tablesorter-master/css/theme.default.css" rel="stylesheet">
<!-- load jQuery and tableSorter scripts -->
<script type="text/javascript" src="./includes/jquery-2.1.0.js"></script>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.js"></script> -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
<!-- load tableSorter widgets -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Call the PHP script that grabs all data from DB
$.getJSON('./get_data.php',function(data){
//alert(data.length);
var dataArr = new Array();
for (x = 0; x < data.length; x++)
{
dataArr[x] = data[x];
//console.log(dataArr[$x]);
}
applyTable(dataArr);
});
});
function applyTable(arrayIn)
{
//alert(arrayIn[0]);
$('#topdiv').tablesorter({
theme : 'default',
//widgets : ['zebra','columns'],
debug : true,
widgetOptions : {
build_source : arrayIn,
build_headers : {
rows : 1,
classes : [],
text : [],
widths : [ '15%', '15%', '30%', '15%', '40%', '30%', '30%', '30%', '30%', '30%' ]
}
}
});
$("#topdiv").trigger("updateAll");
}
</script>
</head>
<body>
<div id="topdiv"></div>
</body>
</html>
Any ideas? Mottie, where are you.
EDIT: Chrome reports no JavsScript errors. Though the console (since I specified "debug: true") gives:
stopping initialization! No table, thead, tbody or tablesorter has already been initialized
I also know that the PHP script is working fine.
EDIT, PHP CODE (excerpt):
$headersArr = array('ID', 'Col 2', 'Col 3',
'Col 4', 'Col 5', 'Col 6',
'Col 7', 'Col 8', 'Col 9', 'Col 10');
$allArr = array();
array_push($allArr, $headersArr);
while($row = mysql_fetch_object($rs))
{
$newRow = array($row->id, $row->col_B, $row->col_C,
$row->col_D, $row->col_E,
$row->col_F, $row->col_G,
$row->col_H, $row->col_I,
$row->col_J);
array_push($allArr, $newRow);
}
echo json_encode($jobsArr);
The following image is the JavaScript output in the Chrome console (I have not updated the code above to keep it from getting to big, but I simply repacked the array passed to applyTable() and outputted both arrays to the console). Which one of these arrays should be for use with Tablesorter?
From looking at the code, it looks like the array is just one long array.
dataArr = [ 'r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2', ... ];
It needs to be an array of row arrays:
dataArr = [
['r0c0', 'r0c1', 'r0c2'],
['r1c0', 'r1c1', 'r1c2'],
...
];
so make two loops (demo):
$(function () {
// Declare the array holding the data
var dataArr = [];
// Call the PHP script that grabs all data from DB
$.getJSON('./get_data.php', function (data) {
var i, j, row,
// you need to know how many columns
columns = 3,
// calculate how many rows
rows = Math.ceil(data.length / columns);
for (i = 0; i < rows; i++) {
// clear row array
row = [];
for (j = 0; j < columns; j++) {
row.push(data[i * columns + j]);
}
dataArr.push(row);
}
applyTable(dataArr);
});
});
function applyTable(arrayIn) {
$('#topdiv').tablesorter({
theme: 'default',
//widgets : ['zebra','columns'],
widgetOptions: {
build_source: arrayIn,
build_headers: {
rows: 1,
widths: ['33%', '33%', '33%']
}
}
});
}
And don't trigger an "updateAll" because the table was just built.
The error you mentioned is still showing up, it looks like an bug, but it's just an unintentional message, nothing else.
The table was not building due to missing the line in the HTML header:
<script type="text/javascript" src="./includes/tablesorter-master/js/widgets/widget-build-table.js"></script>
The PHP script is absolutely fine. The only JavaScript req'd is:
$(document).ready(function(){
$.getJSON('./get_data.php',function(data){
applyTable(data);
});
});
function applyTable(arrayIn){
$('#topdiv').tablesorter({
theme: 'default',
//widgets : ['zebra','columns'],
debug: true,
widgetOptions: {
build_source: arrayIn,
build_headers: {
rows: 1
}
}
});
I'm doing an app using Phonegap (Cordova) and I'm using jquery mobile for that. I want to know how show the chart dynamically. The data of chart will retrieve from sqlite database. The chart will be in pie chart. Please help me.
You should try google charts
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var sqlitedata ;
//var data = google.visualization.arrayToDataTable(
// [
// ['Task', 'Hours per Day'],
// ['Work', 11],
// ['Eat', 2],
// ['Commute', 2],
// ['Watch TV', 2],
// ['Sleep', 7]
// ]
// );
var data = google.visualization.arrayToDataTable(sqlitedata );
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// Populate the database
//
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');//comments this line after first user
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');//comments this line after first user
}
// Query the database
//
function queryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}
// Query the success callback
function querySuccess(tx, results) {
var len = results.rows.length;
var row;
console.log("DEMO table: " + len + " rows found.");
for (var i=0; i<len; i++){
console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data);
// get your two columns here and insert it on
sqlitedata="[[" + row[0].item(i) + "], [" + row[1].item(i) + "]]"
}
}
// Transaction error callback
//
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
// Transaction success callback
//
function successCB() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(queryDB, errorCB);
}
// device APIs are available
//
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
for fetching data please read phonegap document
I'm getting a 403 Forbidden error when trying to access a merged Fusion Table with the code below. Nor I understand why neither how to resolve this.
Accessing the table that has been merged with another table works like a charme.
The merged table as well as the base tables are publicly downloadable.
Anyone knows what could be wrong?? Is accessing merged tables somehow restricted?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>FÖJ-Einsatzstellen</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
#map-canvas {
height: 500px;
width: 600px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
var map;
var infoWindow = new google.maps.InfoWindow();
var DEFAULT_ICON_URL = 'http://g.etfv.co/http://www.google.com'
// EDIT: change this key to your own from the Google APIs Console
// https://code.google.com/apis/console/
var apiKey = 'PLACE_YOUR_OWN_KEY_HERE';
// EDIT: Specify the table with location data and icon URLs
//var tableID = '1i0mw7f4b06sG14-mAO-zEJI1gekZ8wte_J6w05c'; // Basis-Table
var tableID = '1eCPADfnXccPMAYh24W-pUEF-eiKSlOD9e0xSKBM'; // ge-merge-te Table
// Create variables for the columns you need to retrieve from the table
var latitudeColumn = 'Latitude';
var iconUrlColumn = 'Farbcodierung für Marker';
function createMarker (coordinate, url, content) {
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: new google.maps.MarkerImage(url)
});
google.maps.event.addListener(marker, 'click', function(event) {
infoWindow.setPosition(coordinate);
infoWindow.setContent(content);
infoWindow.open(map);
});
};
function fetchData() {
// Construct a query to get data from the Fusion Table
var query = 'SELECT '
+ latitudeColumn + ','
+ '\'' + iconUrlColumn + '\''
+ ' FROM '
+ tableID;
var encodedQuery = encodeURIComponent(query);
// Construct the URL
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=' + apiKey);
url.push('&callback=?');
// Send the JSONP request using jQuery
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: onDataFetched,
error: onError,
timeout : 7500
});
}
function onError(e) {
alert(e);
}
function onDataFetched(data) {
if(data.error) {
var errs = data.error.errors;
var msg = "";
for (var i in data.error.errors) {
msg +=
parseInt(i, 10)+1 + ". Fehler:" +
"\ndomain: " + errs[i].domain +
"\nmessage: " + errs[i].message +
"\nreason: " + errs[i].reason + "\n";
}
alert(
"Leider sind Fehler aufgetreten (um genau zu sein: " + data.error.errors.length + " Fehler, Code: " + data.error.code + "):\n" + msg
);
return;
}
var rows = data['rows'];
var iconUrl;
var iconUrl_part1 = 'http://chart.apis.google.com/chart?cht=mm&chs=32x32&chco=';
var iconUrl_part2 = '&ext=.png';
var content = "mein content";
var coordinate;
// Copy each row of data from the response into variables.
// Each column is present in the order listed in the query.
// Starting from 0.
// EDIT this if you've changed the columns, above.
for (var i in rows) {
var geocode = rows[i][0].split(",");
coordinate = new google.maps.LatLng(geocode[0],geocode[1]);
if (rows[i][1] != '') { // ensure not empty
iconUrl = iconUrl_part1 + rows[i][1] + iconUrl_part2;
createMarker(coordinate, iconUrl, content);
} else {
createMarker(coordinate, DEFAULT_ICON_URL, content);
}
}
}
function initialize() {
fetchData(); // begin retrieving data from table, and put it on the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(48.537778, 9.041111),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I'm having a quite bit of difficulty creating some functions for my fusion tables. I have two tables here:
Points
Parcels
I'm trying to create a number of functions:
1) I want to be able to select the points layer using a drop down menu to select by its ID number.
2) I want to create a function where when I pick my point, I can tell fusion tables to find me the parcels that are within 1km of the point. It would preferable if I can change the distances, so I can do searches for 5km for example.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
var layerl1;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.94255650099583, -79.53326251471042),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1-6QDLUk0Xw7weaB0GP1nmgwvXUuaXJCxWEYbO8E'
},
map: map,
styleId: -1,
templateId: -1
});
layerl1 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1BdIN39m70Vo6Sq0Y5lm1s_4Crh1CZpSwRbYMfnM'
},
map: map,
styleId: -1,
templateId: -1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1-6QDLUk0Xw7weaB0GP1nmgwvXUuaXJCxWEYbO8E',
where: "'description' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
function changeMapl1() {
var searchString = document.getElementById('search-string-l1').value.replace(/'/g, "\\'");
layerl1.setOptions({
query: {
select: "'col2'",
from: '1BdIN39m70Vo6Sq0Y5lm1s_4Crh1CZpSwRbYMfnM',
where: "'description' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Zone: </label><input type="text" id="search-string-l0">
<input type="button" onclick="changeMapl0()" value="Search">
</div>
<div style="margin-top: 10px;">
<label>SPP_ID: </label>
<select id="search-string-l1" onchange="changeMapl1(this.value);">
<option value="">--Select--</option>
<option value="<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style=
Thanks for your help!
Check out the Fusion Tables API Reference, particularly ST_DISTANCE. It looks like what you'll want to do is first geocode each parcel in the fusion table itself (add an address field or lat/long columns and run the built-in geocoder), then you can SELECT with WHERE ST_DISTANCE(location_column, point_location) <= max_distance
On a separate note, you might want to consider leaving HTML formatting out of the fusion table - that's typically something you put in the application/template rather than the data source (for example, imagine if you wanted to use that same data source for
Currently Fusion Tables does not support to use the location column of one table to run spatial queries on another (at least I don't know of this possibility). But still you can achieve what you want, by converting your points to a geometry and then run a spatial query with ST_INTERSECTS on your parcels table.
Steps:
Get the lat/lng values from the point the user clicked on. Either from your Fusion Table or directly from the click event of the map:
GEvent.addListener(map, "click", function(overlay, latLng) {
var lat = latLng.lat(),
lng = latLng.lng();
});
Here is a complete example of getting the lat/lng values from the map.
Use this lat/lng values to update the query of the parcels layer
layer.setOptions({
query: {
select: location
from:
where: 'ST_INTERSECTS(circle(latlng(lat,lng),radius), location)
}
});
See the circle example of Fusion Tables.