I am new to Web development and Phonegap/Cordova. In the code below i am anticipating that the table would be filed with the version, uuid etc but i am getting an empty column for that.
<!DOCTYPE HTML>
<html>
<head>
<title> Phone Gap </title>
<script type="text/javascript" src="cordova-1.9.0.js"></script>
<script type="text/javascript">
function onDeviceReady() {
document.getElementById("deviceName").innerHtml=device.name;
document.getElementById("version").innerHtml=device.cordova;
document.getElementById("uuid").innerHtml=device.uuid;
}
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onLoad="init()">
<h1>Device Info </h1>
<table border="1">
<tr>
<td>Device Name</td>
<td id="deviceName"></td>
</tr>
<tr>
<td>Version</td>
<td id="version"></td>
</tr>
<tr>
<td>UUID</td>
<td id="uuid"></td>
</tr>
</table>
</body>
</html>
It's innerHTML not innerHtml.
function onDeviceReady() {
document.getElementById("deviceName").innerHTML=device.name;
document.getElementById("version").innerHTML=device.cordova;
document.getElementById("uuid").innerHTML=device.uuid;
}
Related
I have some images in my opening screen, some are on the page, some are not when I install the apk into the phone. I tried to find a solution but none worked for me.
Any idea why the following scenario exists at all ?
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.4.2.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/www/css/main.css" />
<link rel="stylesheet" href="file:///android_asset/www/css/jqm-icon-pack-fa.css" />
<script src="file:///android_asset/www/js/jquery-1.11.2.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.4.5.js"></script>
The weird things;
It works in my LG G2 (4.4.2)
It DOES not work in Samsung S2 (4.2.2) even though the images are in the same folder and they are all in .jpg format, the images in the first div work, the ones in the second div not working.
The working piece in the same html;
<div data-role="header" style="padding-top:20px;">
<center><img style="padding-bottom:10px;" src="file:///android_asset/www/images/openingPage/logo.png" />
</center>
<center><img style="max-width:100%;" src="file:///android_asset/www/images/openingPage/header_image.jpg" />
</center>
</div>
The piece that is not working at all ; (I do not see the images in the table inside the div, works in the browser, emulator, LG G2 with Android version 4.4.2 !)
<div data-role="main" class="ui-content">
<table style="width:100%; margin-top:3%;">
<tr>
<td>
<a href="./19.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/1.jpg" />
</center>
</a>
</td>
<td>
<a href="./27.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/2.jpg" />
</center>
</a>
</td>
</tr>
<tr>
<td style="padding-top:5%;">
<a href="./116.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/3.jpg" />
</center>
</a>
</td>
<td style="padding-top:5%;">
<a href="./132.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/4.jpg" />
</center>
</a>
</td>
</tr>
</table>
</div>
MainActivity;
public class MainActivity extends Activity {
private WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView1);
// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
//mWebView.setWebContentsDebuggingEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setAllowContentAccess(true);
mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
mWebView.loadUrl("file:///android_asset/www/18.html");
}
Well, I am pretty surprised that "center" tag is the one causing to the problem.
When I removed it from the surrounding of "img" tags, the problem disappeared for S2 with 4.2.2.
<div data-role="main" class="ui-content">
<table style="width:100%; margin-top:3%;">
<tr>
<td>
<a href="./19.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/1.jpg" />
</a>
</td>
<td>
<a href="./27.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/2.jpg" />
</a>
</td>
</tr>
<tr>
<td style="padding-top:5%;">
<a href="./116.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/3.jpg" />
</a>
</td>
<td style="padding-top:5%;">
<a href="./132.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/4.jpg" />
</a>
</td>
</tr>
</table>
</div>
i am executing below snippet in android mobile, i am able to see my web form, but jquery snippet not working.
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Jquery Snippet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function () // Call function when page is ready for load..
{
alert("Step 1");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"data-position="fixed" >
<h1>My Income</h1>
</div>
<div data-role="content">
<form id="myincome" data-ajax="true">
<table data-role="table" data-mode="columntoggle">
<tr>
<th>CUSTOMER NAME</th>
<th><input type="text" name="txt_cust_name" id ="txt_cust_name"/></th>
</tr>
<tr>
<th colspan="2"><input type="button" value="Save Changes" id="save_me" /></th>
</tr>
</table>
</form>
</div>
<div data-role="footer" data-position="fixed">
<p>Footer</p>
</div>
</div>
</body>
</html>
java script alert not displayed.
use
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
alert("Step 1");
}
and read understand how pages are loaded in jquery mobile here is an example
http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
right to view code or get the theory here
http://api.jquerymobile.com/loader/
all the best
I have this code in HTML5 using jquery. Fails when trying to run it on Android, don't show the result. Please helpme.
I try to use jquery mobile.
When I run it on my PC runs fine.
<script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js" ></script>
<script type="text/javascript" src="js/libs/jquery-mobile-1.2.0/jquery.mobile.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#calcular").click(function(Event){
var v1 = $("#v1").val();
var v2 = $("#v2").val();
var resultado = parseInt(v1) + parseInt(v2);
$("#r").val(function(){
return resultado;
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="formsuma" id="suma">
<table align="center">
<tr>
<td><label>Valor 1: </label></td>
<td><input name="valor1" id="v1" type="number" /></td>
</tr>
<tr>
<td><label>Valor 2: </label></td>
<td><input name="valor2" id="v2" type="number" /></td>
</tr>
<tr>
<td><label>Resultado: </label></td>
<td><output form="formsuma" name="resultado" id="r"></output></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="calcular" value="Calcular" /></td>
</tr>
</table>
</form>
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.
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.