I am developing a blackberry application using html5 code.I need to find my current location and have to show that in Google map.I am running this in BB9780. It is running in simulator but it gives a wrong location(US location). But it is not running in device.
I suspect the below line is not executing.
navigator.geolocation.getCurrentPosition(onSuccess, onError);
I am giving my code here.Please suggest me where I went wrong
<!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="json2.js" type="text/javascript"></script>
<script src="cordova-1.7.0.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
alert("onDeviceReady");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
function onSuccess(position) {
alert("onSuccess");
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + new Date(position.timestamp) + '<br />';
}
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
<title>Notification Sample</title>
</head>
<body>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>
I dont think its the line you suspect, what is the error message your getting? Its probably the simulator as your code looks correct, though I'm only reading error.message and error.code. This my version of onDeviceReady
function onDeviceReady() {
try {
if(typeof(navigator.geolocation)!='undefined') gl = navigator.geolocation;
else gl=google.gears.factory.create('beta.geolocation');
}catch(e){}
if (gl) {
gl.getCurrentPosition(onSuccess, onError);
alert("Device Ready");
} else {
alert('not supported');
}
}
i get solution by restarting my device
like i am not restarting my device from 1 month
So restart your device may you get solution
please try to add timeout:10000 to see the error log..
it is probably a timeout issue on your specific device
try:
gl.getCurrentPosition(onSuccess, onError,{timeout:10000}); instead
related issue i found on github:
https://github.com/apache/cordova-plugin-geolocation/issues/119#issuecomment-463897045
and here:
phonegap geolocation always fail on timeout
Related
I have a g:field that when pressing enter or deselect it the page needs to refresh it self because i have a value that is calculated by value in the g:field
<g:field type="text" name="amount" pattern="[1-9]*" maxlength="2" value="${Buyer?.amount}"/>
I tired with, but it does not work for some reason
$("#amount").change(function() {
$("#" + divId).load("/ordering" + "?amount=" + document.getElementById('amount').value)
}
$("#amount").keydown(function (event) {
if (event.keyCode === 13) {
$("#" + divId).load("/ordering" + "?amount=" + document.getElementById('amount').value)
}
}
I simplified your code a little to provide a complete working example, the following works for me with little changes to your original post.
/views/test/index.gsp
<!doctype html>
<html>
<head>
<meta name="layout" content="main"/>
<script>
$(document).ready(function(){
var amt = $( '#amount' );
$( amt ).keydown(function (event) {
if (event.keyCode === 13) {
$( "#myDiv" ).load("/ordering" + "?amount=" + amt.val() )
}
});
$( amt ).change(function() {
$("#myDiv").load("/ordering" + "?amount=" + amt.val() )
});
});
</script>
</head>
<body>
<g:field type="text" name="amount" pattern="[1-9]*" maxlength="2" value="${params.amount}"/>
<div id="myDiv"></div>
</body>
</html>
TestController
def ordering() {
render( "Amount is ${params.amount}" )
}
I have add the some plugin such as device by the following:
$ cordova plugin add org.apache.cordova.device
Then when I try the sample code to show the device information:
<html>
<head>
<title>Device Properties 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() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Model: ' + device.model + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</head>
<body>
<p id="deviceProperties">Loading device properties...</p>
</body>
</html>
but the information did not show. When I added an onClick function:
<script>
function test(){
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Model: ' + device.model + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
<p onclick="test();"; id="deviceProperties">Loading device properties...</p>
The device information could be shown after I click it...
This situation only occurred in ios , my android app works well.please help~Thank you.
I am facing an problem in phonegap while integrating native EmailComposer.
MailComposer should open up on button click, but it does not shows the mailComposer for IOS, same code for android is working,
My Code is as follow:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", deviceready, true);
function deviceready() {
console.log("Device ready");
}.
//function to send mail using mail composer
function composeText(){
var vehiclemileage = document.getElementById('vehiclemileage').value;
var vehiclemodel = document.getElementById('vehiclemodel').value;
var message1 = document.getElementById('message_body').value;
var vechicleyear = document.getElementById("yeardropdown");
var strUser = vechicleyear.options[vechicleyear.selectedIndex].value;
var vehiclemake = document.getElementById("vehiclemake");
var makevehicle = vehiclemake.options[vehiclemake.selectedIndex].value;
var deviceName = device.platform;
var devicemodel = device.model;
if(vehiclemodel == '' || makevehicle == ''){
alert("Please Enter all the Value");
navigator.notification.alert(
'Please Enter all the Value', // message
alertDismissed, // callback
'Vehicle and Model', // title
'Ok' // buttonName
);
}
else
{
//function to check folder named "RepairMyCar" and extract picture from folder to attach it to mail
var attachPath;
var attachFile= new Array();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("RepairMyCar", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
var dated, fnamed, phoned, emailed;
if(typeof(Storage)!=="undefined")
{
dated = localStorage.date;
fnamed = localStorage.fname;
phoned = localStorage.phone;
emailed= localStorage.email;
}
console.log(attachFile);
var newattachment = attachFile.toString();
//Open mail composer with all datas
setTimeout(function(){window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Date: " + dated + '<br>' + "First Name: " + fnamed + '<br>' + "Phone Number: " + phoned + '<br>' + "Email Address: " + emailed + '<br>' + "Year of Vehicle: " + strUser + '<br>' + "Make of Vehicle: " + makevehicle + '<br>' + "Model of Vehicle: " + " " + vehiclemodel + '<br>' +
"Mileage of Vehicle: " + " " + vehiclemileage + '<br>' + message1 + '<br>' + "Sent from My:" + deviceName + devicemodel,
[sth#sth.com],
[],
[],
true,
attachFile
);},100);
//Clear LoccalStorage
localStorage.clear();
//exit the app after clicking this button
navigator.app.exitApp();
// navigator.camera.cleanup(onSuccess,fail);
// function onSuccess(){
// }
// function fail(){
// }
}
}
function onFail(message) {
alert('Failed because: ' + message);
}
/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
//function to load year in drodown. Default selected year : Current Year
function populatedropdown(yearfield){
var today=new Date()
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
//Select Year
var thisyear=today.getFullYear()
for (var y=0; y<25; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Get a Repair Estimate</h1>
<div class="main-content">
<p>
Please Enter the Year, Make, Model and Mileage of Your Vehicle and any other information we should know.
</p>
<form class="vehicle-detail-form">
<ul>
<li>
<label>Year of Vehicle: </label>
<form action="" name="someform">
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("yeardropdown")
}
</script>
</li>
<!-- Vehicle Year Selection -->
<li><label>Model of Vehicle:</label>
<input type="text" name="vehiclemodel" id = "vehiclemodel">
</li>
<li><label>Mileage of Vehicle:</label>
<input type="number" name="vehiclemileage" id = "vehiclemileage"></li>
<li>
<textarea name="message_body" id = 'message_body' placeholder="Add Notes here(if any)"></textarea>
</li>
</form>
<div style="clear:both;"></div>
<div class="large-button-wrapper">
<button onclick="composeText();">Get Your Estimate</button>
</div>
</div>
</div>
</body>
</html>
I have kept EmailComposer.h and EmailComposer.m in plugin folder as stated in this link
I found a workaround if you work on an iOS project. I have the same issue.
After view change in backbone router console.log stops working in Xcode you can use Safari Web Inspector on your Mac. Every console.log is visible there.
I am able to get longitude and latitude in phonegap .Now i need to show this on map view .Is there any jquery or phonegap library to show in map? I need jquery mobile code so that it will run on both android as well as in Ios.
var lng = 0;
//A button click will call this function
function getLocation() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: true });
}
// onSuccess Geolocation
//
function onSuccess(position) {
//Lat long will be fetched and stored in session variables
//These variables will be used while storing data in local database
lat = position.coords.latitude;
lng = position.coords.longitude;
// alert('Lattitude: ' + lat + ' Longitude: ' + lng);
sessionStorage.setItem('lattitude', lat);
sessionStorage.setItem('longitude', lng);
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}var lng = 0;
//A button click will call this function
function getLocation() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: true });
}
// onSuccess Geolocation
//
function onSuccess(position) {
//Lat long will be fetched and stored in session variables
//These variables will be used while storing data in local database
lat = position.coords.latitude;
lng = position.coords.longitude;
// alert('Lattitude: ' + lat + ' Longitude: ' + lng);
sessionStorage.setItem('lattitude', lat);
sessionStorage.setItem('longitude', lng);
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
It is extremely easy when working with jQuery Mobile + a small Google framework called GMAP API v3.
Working example: http://jsfiddle.net/Gajotres/7kGdE/
CSS is important here because data-role="content" will by default not cover whole page so we need to force it to cover available space.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
CSS:
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
Javascript:
$(document).on('pageinit', '#index',function(e,data){
// This is the minimum zoom level that we'll allow
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
You can make use of the Google Maps JavaScript API. You'll be able to include a map in your application just using JavaScript and HTML. All the info to accomplish this is here. And if you want to show the actual position of the coordinates, you can insert a maker
I want to be able to show the recent captured image via the button <button onclick="showImage();">Show Image</button><br>, but not sure how to do this and I can't find any good information about it in the Phonegap API. Basically it's the function showImage(); I need help creating.
The code for capturing an image is being executed correctly and I am running iOS 6.
Phonegap/Cordova:
<title>Capture Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
readDataUrl = mediaFiles[i].fullPath;
}
};
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
document.getElementById('errormsg').innerHTML = msg;
}
function captureImage(){
document.getElementById('format-data').innerHTML = "";
document.getElementById('capture-result').innerHTML = "";
navigator.device.capture.captureImage(captureImageSuccess, captureError, {limit: 1});
}
}
function captureImageSuccess(mediaFiles) {
var i, len;
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
};
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// uploadFile(mediaFiles[i]);
document.getElementById('capture-result').innerHTML = "<br/><strong>" + (i+1) + " file<br/> Path: " + mediaFiles[i].fullPath + "</strong><br/>" +
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
mediaFiles[i].getFormatData(formatSuccess, formatError);
}
console.log("captureImageSuccess");
}
</script>
</head>
HTML:
<body>
<button onclick="captureImage();">Capture Image</button> <br>
<button onclick="showImage();">Show Image</button><br>
<div class="result-block">
Capture Result: <span id="capture-result"></span><br/>
<span id="errormsg"></span>
</div>
</body>
</html>
Well you have the image's full path, just create an img element :
<img id="picResult" />
and in your javascript set it's url whenever you get a response:
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
//HERE:
document.getElementById('picResult').src = mediaFiles[i].fullPath;
};
I posted answer to issue similar like yours. That post show you how you show captured picture on a thumbnail.
See how you could solve your issue: https://stackoverflow.com/a/14043467/1853864
HTML
<img id="picResult" width="100px" border="1" />
JS
// capture callback
function captureSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
// do something interesting with the file
$('#picResult').attr('src',path);
}
};
Make sure to check the PhoneGap version number on top right of these online docs to make sure you are doing things right.
SEE HOW HERE TOO PhoneGap - Media Docs