How can i get these items below to read that data from the device and Display in in my html page below?
$('#devicename').html(device.name);
$('#devicephonegap').html(device.phonegap);
$('#devicplatform').html(device.platform);
$('#deviceuuid').html(device.uuid);
$('#deviceversion').html(device.version);
Full page code
<!DOCTYPE html>
<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="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(document).on("pageinit", "#newpage", function () {
$('#saveButton').click(function () {
localStorage.setItem("name", $('#name').val());
});
});
var wID = navigator.accelerometer.watchAcceleration(onSucess, onerror, { frequency: 1000 });
function onSucess(a) {
$('#aX').html(a.x);
$('#aY').html(a.y);
$('#aZ').html(a.z);
$('#aTime').html(a.timestamp);
}
function onError() {
}
var phoneName = window.device.name;
var phoneName = device.name;
$('#devicename').html(device.name);
$('#devicephonegap').html(device.phonegap);
$('#devicplatform').html(device.platform);
$('#deviceuuid').html(device.uuid);
$('#deviceversion').html(device.version);
$(document).on('pageshow', '#newpage', function () {
var personName = localStorage.getItem("name");
if (personName.length > 0) {
$('#name').val(personName);
}
});
</script>
<title>Hello World 2</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Home Page2</h1>
</div>
<div data-role="content">
hello Phone Gap and JQuery Mobile!
new page
<br>
<p id="devicename"> </p>
<p id="devicephonegap"> </p>
<p id="deviceplatform"> </p>
<p id="deviceuuid"> </p>
<p id="deviceversion"> </p>
<p id="ax"> </p>
<p id="ay"> </p>
<p id="az"> </p>
<p id="aTime"> </p>
</div>
<div data-role="footer" data-position="fixed">
Add Something
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
Cancel
<h1>New Page</h1>
save
</div>
<div data-role="content">
<label for="name">what is your name?</label>
<input id="name" type="text" name="name" value="" />
<a id="saveButton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<div id="dialogpage" data-role="page">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
this is a dialog
</div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
You need to include the Device plugin and ask for the Android READ_PHONE_STATE permission. This is clearly documented at:
http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#Device_permissions
- You will need to add READ_PHONE_STATE permission to your AndroidManifest.xml file.
Related
I need to get OpenStreetMap running under Dojo. I followed this example : http://dojotoolkit.org/reference-guide/1.9/dojox/geo/openlayers.html
The problem is that the map is not rendered and I don't know why. The example implementation is this one : http://demos.dojotoolkit.org/demos/mobileOpenLayers/demo.html
When i copy the code and run it locally it does not work !
My code so far (it is the same as in the given example) :
<!DOCTYPE html>
<html>
<head profile="http://www.w3.org/2002/12/namespace">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Dojo OpenLayers Map Demo</title>
<!-- hosted version of Open Layer libraries -->
<script type="text/javascript" src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="parseOnLoad: 1, async:1"></script>
<script type="text/javascript" src="src.js" charset="utf-8"></script>
</head>
<body style='visibility:hidden;'>
<div id="home" data-dojo-type="dojox.mobile.View" selected="true" >
<h1 data-dojo-type="dojox.mobile.Heading" label="OpenLayers Map"></h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Go To:</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li id="paris" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
Paris
</li>
<li id="newyork" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
New York
</li>
<li id="lacolle" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
La Colle sur Loup
</li>
</ul>
</div>
<div id="mapPage" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="home" id="mapHeader"></h1>
<div id="map" style="height:100%; width:100%; background-color: #b5d0d0;">
</div>
</div>
</body> </html>
My research so far : When I use absolute values for the map-div, it works :
<div id="map" style="height:100px; width:100px; background-color: #b5d0d0;">
</div>
But I need to get it in fullscreen. How can I resolve this problem ?
I have a login form in my phone app and in that I need to initially place my form elements in center of the screen and later when some one tries to enter inputs to login name or password the input block get shifted upwards so that it does not get hidden by the keypad. Though my code works fine in browser, in phonegap I get ignore this event. Please guide
<html>
<head>
<title>daDrive - Login</title>
<script type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui-1.10.3.js"></script>
<script src="../js/jquery.mobile-1.3.1.min.js"></script>
<script src="../js/code/util.js"></script>
<script src="../js/code/login.js"></script>
<script src="../js/code/register.js"></script>
<script src="../js/code/account.js"></script>
<script src="../js/code/home.js"></script>
<script src="../js/code/constants.js"></script>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/jquery.mobile.theme-1.2.0.min.css" />
<link rel="stylesheet" href="../css/jqm-docs.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
if(flag==0){
flag=1;
$("#loginPass_txtboxes").animate({"margin-top": "-=30%"}, "slow");
}
});
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase()!="input" && flag==1){
flag=0;
$("#loginPass_txtboxes").animate({"margin-top": "+=30%"}, "slow");
}
});
});
</script>
</head>
<body>
<div data-role="page" id="page_id">
<div id="loginPageLogo" style="margin-top:3%;">
<center><img src="../images/logo_dadrive.png"/></center>
</div>
<div data-role="content" id="main_page" style="padding:0 !important;">
<div id="login_middle_content">
<div id="loginPass_txtboxes" style="width: 60%; margin-left: 20%; margin-top:35%" onblur="shiftDown()">
<div data-role="fieldcontain" class="ui-hide-label" >
<label for="LoginId">Login ID:</label>
<input type="text" name="LoginId" id="LoginId" value="" placeholder="Login Id" data-mini="true"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" data-mini="true"/>
</div>
</div>
<div align="center">
Login
</div>
</div><!--middle-->
</div>
</div><!--page -->
</body>
See the answer to this question which also provides some details for handy events you might like.
I have tried following code and I am getting error Connection to server was unsuccessful to "www/assets/index.html"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
the interesting fact is it was working fine earlier. But now I am getting this error. Infact I have even tried this approach[super.setIntegerProperty("loadUrlTimeoutValue", 60000); ], but not solved. It removes the error, but the data from remote server is not loading..Please help me..
Thanks.
Sorry for the late reply..here is the code..the only difference is i have included all the css and js files into my project than referring from CDN
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<link href="styles/jquery.mobile-1.0.min.css" />
<script src="scripts/jquery-1.6.4.min.js"></script>
<script src="scripts/jquery.mobile-1.0.min.js"></script>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
Thanks.
I have the following code for swipe right event in jquery mobile/phonegap app.Code is working fine, but problem is i have to swipe 3-4 times to get response on android device.
<!DOCTYPE html>
<html>
<head>
<title>Slider Stop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("swiperight", "#listitem", function() {
$.mobile.changePage("#page1");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li>Back to the Home Page</li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
</body>
</html>
You need to make sure your document and device are both ready. I suggest this:
<!DOCTYPE html>
<html>
<head>
<title>Slider Stop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// set your swipe threshold explicitly
$.event.special.swipe.horizontalDistanceThreshold = 120;
$(document).on("swiperight", "#listitem", function() {
$.mobile.changePage("#page1");
});
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="home">
...
This is caused by a bug in JQM that has been resolved but is not yet implemented https://github.com/jquery/jquery-mobile/issues/5534
Basically the min distance measured by the swipe event must take into account the pixel density of the device. So in JQM's case, the following change to touch.js will solve the issue:
horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
I'm trying to do multi page application for android with PhoneGap,jQuery-mobile...
but i get that my pages #statify# (don't know how it's called) -
what can be wrong??
i used this tutorial: http://jquerymobile.com/test/docs/pages/multipage-template.html
here is my code.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
<link rel="stylesheet" href="css/style.css" />
<script>
$('#greengamebtn').live('tap',function(event) {
$('#textpage1').removeClass('red').addClass("green");
});
$('#redgamebtn').live('tap',function(event) {
$('#textpage1').removeClass('green').addClass("red");
});
$('#exitgamebtn').live('tap',function(event) {
navigator.app.exitApp();
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header">
<h1><p class="red" id="textpage1">PAGE 1</p></h1>
</div>
<div data-role="content">
<div data-role="button" id="redgamebtn" "><h2> RED</h2></div>
<div data-role="button" id="greengamebtn" "><h2> GREEN</h2></div>
</div>
</div>
<div page-role="page" id="page2" data-theme="b">
<div data-role="header">
<h1><p class="red" id="textpage2">PAGE 2</p></h1>
</div>
<div data-role="content">
<div data-role="button" id="exitgamebtn" "><h2> Exit game</h2></div>
</div>
</div>
</body>
</html>
It looks like from the screenshot that the JQM library is not loaded. Just to see if I'm right try replacing
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
with this
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
I'm not sure if this matters but notice that I used JQuery 1.6.4. That is the recommended version to use with JQM 1.0.1. If that works then check your paths and try again. I hope this helps!