phonegap filewriter - javascript

I'm using phonegap to develop a mobile web application and possibly transfer it to other platforms later on such as android, etc.
I want to be able to write to local files on the device, however, no matter, what I do, it doesn't work. There is no proper documentation to support with such problems.
If anyone could help, I'd greatly appreciate it.
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />-->
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css"/>
<script src="jquery/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
<title>Hello World</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="NativeControls.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>LOGIN</h1>
</div>
<div data-role="content">
<img src="images/cslogosmall2.png" style="margin-top: -10px; margin-left: -5px;"/>
<form id="login" method="post">
<p>
<ul data-role="listview" data-theme="g" id="contentlist">
<b>Program:</b>
<input type="text" id="program"/>
<b>Username:</b>
<input type="text" id="username"/>
<b>Password:</b>
<input type="password" id="password"/>
</ul>
</p>
<br/>
<button type="submit" data-theme="a" id="submit" value="Submit"></button>
Offline
</form>
</div>
<!--<div data-role="footer">
<h1> Main Page Footer </h1>
</div>-->
</div>
<div data-role="page" id="contentpage">
<div data-role="header">
<h1> Content Page </h1>
</div>
<div data-role="content">
<a href="#" data-role="button" onclick="history.go(-1);return false;" onClick=buttonDemo()> Back to Main Page </a>
<a href="#" data-role="button" id="beepbtn" onClick=beepbeep()> Beep!</a>
</div>
<div data-role="footer">
<h1> Content Page Footer </h1>
</div>
</div>
</body>
</html>
And here is my javascript file:
function validate() {
navigator.notification.alert("validate called");
var program = document.getElementById('program');
var username = document.getElementById('username');
var password = document.getElementById('password');
if (!program || program == "") {
navigator.notification.alert("Please enter a program");
return false;
}
else if (!username || username == "") {
navigator.notification.alert("Please enter a username");
return false;
}
else if (!password || password == "") {
navigator.notification.alert("Please enter a password");
return false;
}
return true;
}
function beepbeep() {
//navigator.notification.alert("Beep function called");
navigator.notification.beep();
}
$(document).ready(function() {
$('#submit').click(function() {
var program = document.getElementById('program').value;
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (!program || program == "") {
alert("Please enter a program", null, "ClearSpider", "OK");
return false;
}
else if (!username || username == "") {
alert("Please enter a username", null, "ClearSpider", "OK");
return false;
}
else if (!password || password == "") {
alert("Please enter a password", null, "ClearSpider", "OK");
return false;
}
return true;
});
document.addEventListener("deviceready", onDeviceReady, false);
window.addEventListener("resize", orientationChange, false);
});
function test() {
console.log("fail");
var fs = FileWriter.write(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
alert(LocalFileSystem.PERSISTENT);
alert("Test called");
}
function onTabBarItem(id)
{
alert("hello");
//jQT.goTo("#" + id, "slide");
// if you need to modify the tabbar items that are shown, you should do
// so here.
}
function fail(error) {
console.log(error.code);
}
function gotFS(fileSystem) {
alert("at gotFS");
fileSystem.root.getFile("readme.txt", {create: true}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
alert("at gotFileEntry");
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
alert("at gotFileWriter");
writer.onwrite = function(evt) {
console.log("write success");
};
writer.write("some sample text");
// contents of file now 'some sample text'
writer.truncate(11);
// contents of file now 'some sample'
writer.seek(4);
// contents of file still 'some sample' but file pointer is after the 'e' in 'some'
writer.write(" different text");
// contents of file now 'some different text'
}
/* 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() {
// Initializating TabBar
//window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
navigator.notification.alert("hi kaan", null, "hey", "SWEET");
Cordova.exec("NativeControls.createTabBar");
//var options = "top";
var options = "bottom";
navigator.notification.alert(window.requestFileSystem);
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
break;
case 90:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
break;
default:
Cordova.exec("NativeControls.showTabBar", options);
Cordova.exec("NativeControls.showToolBar");
document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: ";
break;
}//end switch
}//end window.orientationchange
//var taboptions = {"onSelect":onTabBarItemSelect};
var moreNum = 1;
Cordova.exec("NativeControls.showTabBar", options);
var onSelect = {"onSelect":onTabBarItem};
//onSelect = "hahaha";
Cordova.exec("NativeControls.createTabBarItem", "test", "test", "tabButton:Recents", onSelect);
Cordova.exec("NativeControls.createTabBarItem", "test2", "test2", "tabButton:Search", onSelect);
Cordova.exec("NaviteControls.createTabBarItem", "test3", null, "tabButton:More", onSelect);
Cordova.exec("NativeControls.showTabBarItems", "test", "test2", "test3");
Cordova.exec("NativeControls.selectTabBarItem", "test");
//Cordova.exec("NativeControls.tabBarItemSelected", "1");
/*nativeControls = window.plugins.nativeControls;
navigator.notification.alert(nativeControls);
nativeControls.createTabBar();
// Books tab
nativeControls.createTabBarItem(
"books",
"Books",
"tabButton:Recents",
"",
{"onSelect": function() {
books();
}}
);
// Stats tab
nativeControls.createTabBarItem(
"finished",
"Finished",
"tabButton:Recents",
"",
{"onSelect": function() {
finished();
}}
);
// About tab
nativeControls.createTabBarItem(
"about",
"About",
"tabButton:Recents",
"",
{"onSelect": function() {
about();
}}
);
// Compile the TabBar
nativeControls.showTabBar();
nativeControls.showTabBarItems("books", "finished", "about");
nativeControls.selectTabBarItem("books");*/
}
function orientationChange() {
var nativeControls = window.plugins.nativeControls;
nativeControls.resizeTabBar();
}
function books() {
}
function about() {
}
function finished(){
}
Note that this line doesn't work:
navigator.notification.alert(window.requestFileSystem); does not display an alert.

I was using 1.4.1 yesterday when I successfully saw the alert. When I switch to 1.5.0, the alert prints null. This is because of the require namespacing that was added in cordova-1.5.0.
However, even in 1.5.0, the API sample still works for me:
function gotFS(fileSystem) {
navigator.notification.alert(window.requestFileSystem);
myFS = fileSystem;
console.log(fileSystem.name);
console.log(fileSystem.root.name);
$('#file-system-text').html("File System: <strong>" + fileSystem.name + "</strong> " +
"Root: <strong>" + fileSystem.root.name + "</strong>");
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, createGotFileEntry, writeFail);
}
function createFile() { // button onclick function
if (myFS) {
gotFS(myFS);
} else {
navigator.notification.alert(window.requestFileSystem);
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, failFS);
}
}

Related

Local storage and window.location.href.replace

I and my course mate are trying to write a code where when the order button is clicked it should save on local storage and redirect to an order page.
So far when we click on order it is not registered in the application/local storage section of the google developer tool and thus does not redirect to a new page.
We put an eventlistener to show a console.log for when we click, just to be sure the buttons are in order(this part is not important).
We also used an online javascript validator to eliminate typos and errors.
Also do we need any specific code on the order.html file to interface with local storage?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>grc</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Groceries</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<aside><img class="imgclass1" src="images/rounded logo.png" alt="Grocer Nigeria"></aside>
<article class="preinventory">
<section class="columns-desktop">
<div class="inventory">
<img class="sales" src="images/tomato.jpg" alt="Tomato"/>
<div class="columns">
<div class="title">Tomato</div>
<div class="Price">$100</div>
</div>
<p class="Desc"> Our Tomato2</p>
<button data-order="Tomato2">Order</button>
</div>
<div class="inventory">
<img class="sales" src="images/tomato.jpg" alt="Tomato"/>
<div class="columns">
<div class="title">Tomato</div>
<div class="Price">$100</div>
</div>
<p class="desc"> Our Tomato</p>
<button data-order="Tomato">Order</button>
</div>
</section>
</article>
</main>
<footer>
<nav>
<ul>
<li>Home</li>
<li>Groceries</li>
<li>Contact</li>
</ul>
</nav>
</footer>
<script type="text/javascript">
window.addEventListener("DOMcontentLoaded", function(e){
const orderButtons= document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click",function(e){
const button= e.currentTarget;
const container= button.parentNode;
const order={
id:button.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price1: container.querySelector(".Price").innerText,
desc:container.querySelector(".desc").innerText
};
localStorage.setItem('order', JSON.stringify(order));
const url = window.location.href.replace("grc.html","order.html");
window.location.href = url;
});
});
});
window.addEventListener("DOMcontentLoaded", function(e){
console.log("The page is loaded.");
});
const orderButtons= document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click", function(e){
console.log("The button was clicked.");
});
});
</script>
</body>
</html>
**Below is what I see when I run the live server**
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function() {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
head.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
head.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function(msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
console.log('Live reload enabled.');
})();
}
// ]]>
</script>
</body>
</html>
The issue here is that the event DOMContentLoaded does not fire.
Here is how I have used the load event instead; for redirection, I have simply used URL search params (because I don't know what your other html file looks like) although you may use your other html document instead.
The snippet is below
However note: Stackoverflow will not allow the JavaScript to run, and will throw a securityError. To run this code you must save it on your computer or use a jsFiddle
function continue_ordering() {
alert("Now continue with order");
};
window.addEventListener("load", function(e) {
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
const button = e.currentTarget;
const container = button.parentNode;
const id = button.getAttribute("data-order");
const order = {
id,
title: container.querySelector(".title").innerText,
price1: container.querySelector(".price").innertext,
desc: container.querySelector(".desc").innerText
};
localStorage.setItem("order-" + id, JSON.stringify(order));
window.location.search = "?ordering=true&order-id=" + id;
});
});
});
window.addEventListener("load", function(e) {
if (window.location.search.search("ordering=true") != -1) {
console.log("User is ordering");
const params = new URLSearchParams(location.search)
const id = params.get("order-id");
if (!id || id == null) throw "There is no order id, error. Remove the ?ordering=true from the url and try again.";
const order_info = JSON.parse(localStorage.getItem("order-" + id));
if (!order_info) throw "Order information is not present: try ordering again. Remove the ?ordering=true from the url";
console.log("Order info is:\n", order_info);
document.getElementById("ordering").removeAttribute("hidden");
return;
};
document.getElementById("make-order").removeAttribute("hidden");
});
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
console.log("The button was clicked.");
});
});
<div id="make-order" hidden>
<button data-order="test">Order</button>
<div class="title">This is the title</div>
<div class="price">130 USD</div>
<div class="desc">Lorem</div>
</div>
<div id="ordering" hidden>
<h1>
You are ordering.
<br> Choose
Stop ordering Or Continue with order
</h1>
</div>
The DOMcontentLoaded event has already fired by the time that code hooks it.
Check this post;
Code inside DOMContentLoaded event not working

how to fetch and display image from sqlite databae using angular js

I stored images in sqlite database by converting it in base64 format and inserted into DB.It was inserted succssfuly as i got insert id after inserting records but when i opened my db the database's table wasnt having any column .Is that correct ??.
And my second problem is i want to fetch image and display it in the particular area i.e pictureUrl (here) but unable to do so. Below is my code. Suggest the changes required. Thanks in advance :)
app.js
var db=null;
var example=angular.module('starter', ['ionic', 'ngCordova']).run(function($ionicPlatform, $cordovaSQLite) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
db = window.openDatabase("my.db","1.0","my.db",100000);
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS imagewala (img blob)");
window.alert("Database Created .. !")
});
example.controller('CameraCtrl',function($scope, $cordovaCamera,$cordovaSQLite){
function dataURItoBlob(dataURI, callback) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
$scope.pictureUrl="http://placehold.it/50x50";
$scope.takePicture=function(img){
var options = {
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG
};
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.pictureUrl = "data:image/jpeg;base64," + imageData;
var query = "INSERT INTO imagewala (img) VALUES (?)";
$cordovaSQLite.execute(db, query, [img]).then(function(res) {
window.alert("INSERT ID -> " + res.insertId);
}, function (err) {
window.alert(err);
});
window.alert("Picture Captured .. !!");
}, function(err) {
window.alert("Error hai baaaa..!!"+err);
});
}
$scope.takePhoto=function(){
var options = {
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
encodingType: Camera.EncodingType.JPEG
};
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.pictureUrl = "data:image/jpeg;base64," + imageData;
window.alert("Picture Captured .. !!");
}, function(err) {
window.alert("Error hai baaaa..!!"+err.message);
});
}
$scopr.selectPhoto= function () {
var query = "select img from imagewala";
$cordovaSQLite.execute(db, query, []).then(function(res) {
window.alert("SELECT ID -> " + res.insertId);
$scope.pictureUrl=res.readAsArrayBuffer();
window.alert("ahahaha");
}, function (err) {
window.alert(err);
});
window.alert("Photo Captured .. !!");
}
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script>
window.location='./main.html';
</script>
</head>
<body>
</body>
</html>
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/ng-cordova.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="CameraCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Camera</h1>
</ion-header-bar>
<ion-content >
<div class="list card">
<div class="item item-image">
<img src="{{pictureUrl}}">
</div>
</div>
<div class="padding">
<button ng-click="takePicture(pictureUrl)" class="button button-block button-calm">Take Picture</button>
<button ng-click="takePhoto()" class="button button-block button-positive">Choose Picture</button>
<button ng-click="selectPhoto()" class="button button-block button-assertive">Choose Picture</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
As per my knowledge cordova sqlite plugin doesn't support blob data type, Try to change data type img to TEXT data type and check.
I hope this solves your problem

Popup opening multiple time in jquery

i am working on script where i have to open pop up after click on window . but after click on window the function executing twice
.How to resolve this ?
ie after click on window two popup opening . but after click on function the function executing twice
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Best Popunder Script Ever # ScratchingCodes.com</title>
<meta name="description" content="Best Popunder Script Ever Demo and Download" >
<meta name="author" content="Mr. Farhan Saleem ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="testSubmit" >
<header class="txt-center">
<h1>Best Popunder Script Ever Demo and Download</h1>
<br>
<h3>Please click on Button</h3>
<form action="">
<input type="submit" />
</form>
<script type="text/javascript">
(function($) {
$.popunder = function(sUrl) {
var bSimple = $.browser.msie,
run = function() {
$.popunderHelper.open(sUrl, bSimple);
};
(bSimple) ? run() : window.setTimeout(run, 1);
return $;
};
$.popunderHelper = {
rand: function(name, rand) {
var p = (name) ? name : 'pu_';
return p + (rand === false ? '' : Math.floor(89999999*Math.random()+10000000));
},
open: function(sUrl, bSimple) {
var _parent = self,
sToolbar = (!$.browser.webkit && (!$.browser.mozilla || parseInt($.browser.version, 10) < 12)) ? 'yes' : 'no',
sOptions,
popunder;
if (top != self) {
try {
if (top.document.location.toString()) {
_parent = top;
}
}
catch(err) { }
}
sOptions = 'toolbar=' + sToolbar + ',scrollbars=yes,location=yes,statusbar=yes,menubar=no,resizable=1,width=800,height=510';
sOptions += ',height=' + (screen.availHeight - 122).toString() + ',screenX=0,screenY=0,left=0,top=0';
var a = $('#dialog').clone().html();
var popunder = _parent.window.open(sUrl, $.popunderHelper.rand(), sOptions);
var yourDOCTYPE = "<!DOCTYPE html>";
var printPreview = _parent.window.open('about:blank', 'print_preview', "menubar=1,resizable=1,width=1024,height=600");
var printDocument = printPreview.document;
printDocument.open();
printDocument.write(yourDOCTYPE+ "<html>"+ a + "</html>");
if (popunder) {
popunder.blur();
if (bSimple) {
window.focus();
try { opener.window.focus(); }
catch (err) { }
}
else {
popunder.init = function(e) {
with (e) {
(function() {
if (typeof window.mozPaintCount != 'undefined' || typeof navigator.webkitGetUserMedia === "function") {
var x = window.open('about:blank');
x.close();
}
try { opener.window.focus(); }
catch (err) { }
})();
}
};
popunder.params = {
url: sUrl
};
popunder.init(popunder);
}
}
return true;
}
};
})(jQuery);
$(window).unbind().click(function() {
jQuery.popunder('#');
console.log('ok');
});
</script>
</header>
<div id="dialog" class="window">
My Window Content
<div id="popupfoot">
<a href="#" class="close agree" id="close">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<p class="txt-center" style="font-size:14px;" >
<img src="http://scratchingcodes.com/wp-content/uploads/2015/05/Scratching-codes-logo-orange1.png">
<br>
Back to the post </p>
<br>
<footer class="txt-center"> Designed and Developed by <a href="http://scratchingcodes.com/" > Scratching Codes </a> </footer>
</div>
</body>
</html>
Why don't you use the Bootstrap Modal?
http://getbootstrap.com/javascript/#modals
You could try this [pseudocode]
var flag = false;
on click do
if flag === true;
return false;
flag = true;
//do your stuff here
flag = false
end click
your concept of clicking on window and opening the popup is wrong , every time you click on any element the window will popup , which is very disturbing thing , you should implement some trigger for opening the popup , or specify why you want this to be happen.
like to your :
<input type="submit" />
give an id or a class:
<input type="submit" id="open_popup"/>
then change your function from this:
$(window).unbind().click(function() {
jQuery.popunder('#');
console.log('ok');
});
to this
$('#open_popup').click(function() {
jQuery.popunder('#');
console.log('ok');
});
but till you don't provide the information about why and how you want it to react . can't help more

Is possible to call the GPS settings from a Windows Phone 8.1 App in WinJS?

I have an Windows Phone 8.1 App in WinJS that needs GPS.
I´d like that if the GPS is turned off, the app redirect the user to the gps settings of the phone so he can easily turn it on.
Is it possible?
Maybe with the use of "Windows.System.Launcher"?
You may try like this :
// Create a Uri object from a URI string
var uri = new Windows.Foundation.Uri("ms-settings:privacy-location");
Windows.System.Launcher.launchUriAsync(uri).then(
function (success) {
if (success) {
// URI launched
} else {
// URI launch failed
}
});
I write a sample about how to get the location :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebApp</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- WebApp references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
function setText(val, e) {
document.getElementById(e).value = val;
}
function insertText(val, e) {
document.getElementById(e).value += val;
}
var nav = null;
function requestPosition() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback);
}
else {
console.log("Geolocation not supported");
}
}
else {
console.log("Navigator not found");
}
}
function successCallback(position)
{
setText(position.coords.latitude, "latitude");
setText(position.coords.longitude, "longitude");
}
function errorCallback(error) {
var message = "";
// Check for known errors
switch (error.code) {
case error.PERMISSION_DENIED:
message = "This website does not have permission to use " +
"the Geolocation API";
break;
case error.POSITION_UNAVAILABLE:
message = "The current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "The current position could not be determined " +
"within the specified timeout period.";
break;
}
// If it's an unknown error, build a message that includes
// information that helps identify the situation, so that
// the error handler can be updated.
if (message == "")
{
var strErrorCode = error.code.toString();
message = "The position could not be determined due to " +
"an unknown error (Code: " + strErrorCode + ").";
}
console.log(message);
}
</script>
<style></style>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" /> <br />
<label for="longitude">Longitude: </label><input id="longitude" /> <br />
<input type="button" onclick="requestPosition()" value="Get Latitude and Longitude" />
</body>
</html>
Here is the document about this

Chrome Browser Issue for Button

I have an issue with a Button. It is appearing in IE and Firefox, but not appearing in Chrome.
The code for the button is using Rally API and it’s generated while loading the page.
I have tried Googling the answer, but I couldn't find anything.
Heres my code:
function onClick(b, args) {
if(OneButtonClickFlag == true) {
OneButtonClickFlag = false;
var buttonValue = args.value;
var userName = "__USER_NAME__";
TimeSheetReport(); // calling the “timesheet report “
}
}
function onLoad() {
var config = {
text: "Generate",
value: "myValue"
};
var button = new rally.sdk.ui.basic.Button(config);
button.display("buttonDiv", onClick); // call the “onclick” function
}
rally.addOnLoad(onLoad);
This App below seems to work with your code in it up until the point where it encounters your OneButtonClick flag. I tested it in Chrome. Does this work for you?
<head>
<title>Button Example</title>
<meta name="Name" content="Component Example: Button"
/>
<meta name="Version" content="2010.4" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.26/sdk.js"></script>
<script type="text/javascript">
function onClick(b, args) {
console.log("works until this undefined variable");
if (OneButtonClickFlag == true) {
OneButtonClickFlag = false;
var buttonValue = args.value;
var userName = "__USER_NAME__";
TimeSheetReport(); // calling the “timesheet report “
}
}
function onLoad() {
var config = {
text: "Generate",
value: "myValue"
};
var button = new rally.sdk.ui.basic.Button(config);
button.display("buttonDiv", onClick); // call the “onclick” function
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div id="buttonDiv"></div>
</body>

Categories

Resources