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
Related
Hi friends am new to mobile app developing(using jquery mobile and phonegap). In my project i have a task where i need set a date-time picker. i set it using some code but its not working. pls help me how to do it using jquery mobile.Am i need to any plugins or js. pls help me Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>Zeus Palace Hotel</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" href="css/gi-mobile.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="b">
<header data-role="header" class="header">
<figure class="hotelBanner"></figure>
</header>
<section data-role="content" class="ui-grid-a main cf">
<form id="step1" action ="#">
<label for="checkinDate">Check-in:</label>
<input name="checkinDate" id="checkinDate" type="date" data-role="datebox"
data-options='{"mode": "calbox", "afterToday": true}' />
<label for="checkoutDate">Check-out:</label>
<input name="checkoutDate" id="checkoutDate" type="date" data-role="datebox"
data-options='{"mode": "calbox", "afterToday": true}' />
<input type="submit" id="btnsubmit" value="Next >>" />
</form>
<p>Number of Nights: <span id="numNights"></span></p>
</section>
<footer data-role="footer" class="footer">
</footer>
</section>
<script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.min.js"><\/script>')</script>
<script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
<script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.i8n.en.js"><\/script>')</script>
<script defer src="js/master.js"></script>
</body>
</html>
JS file:
// Main JS //
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'dateFormat': 'mm/dd/YYYY',
'headerFormat': 'mm/dd/YYYY',
});
$(document).ready(function() {
$('a.ui-btn .ui-icon').removeClass('ui-icon-grid');
$('a.ui-btn .ui-icon').addClass('ui-icon-arrow-d');
function parseDate(elem) {
return elem.data('datebox').theDate;
}
function daydiff(checkinDate, checkoutDate) {
return (checkoutDate-checkinDate)/(1000*60*60*24)
}
$('#checkoutDate, #checkinDate').live('change', function() {
$('#numNights').each(function() {
$(this).text(daydiff(parseDate($('#checkinDate')), parseDate($('#checkoutDate'))));
});
});
});
But Its not working.. tell me any other ideas to do it using jquery mobile
simple datetimepicker for jQuery mobile.
try this solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=windows-1255" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothnes/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="page" data-role="page" data-theme="c">
<div id="header" data-role="header">
<h1>Play</h1>
<p>Date: </p>
<label for="date">Select Date Range:</label>
<input type="date" name="date" id="datepicker" value="" />
</body>
</html>
I think you forgot to update your access policy to allow all urls, update your config.xml file with the following code:
<access origin="*" />
i have created a web app using query mobile and html5 and currently, none of my JS executes in the application.
JS is enabled on Android WebView as Jquery mobile can execute the JS for the library but does not work on an android device.
It works fine on the iOS simulator and on the web browser so i am wondering if there is some kind of hidden settings/implementation i need to handle for android?
here is the error i receive from an onClick event on a simple dialog html that is outputted using phone gap
07-15 09:25:00.621: E/Web Console(2992): Uncaught ReferenceError: uploadTrue is not defined at file:///android_asset/www/itemDetailCarHire.html:2
Here is the itemDetailCarHire html that launches the dialog that executes the onClick.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemDetailCarHire.js"></script>
<link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" />
<script src="src/jquery.ui.datepicker.js"></script>
<script src="src/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="claimProfileListView" data-inset="true" data-scroll="true">
<h3>Original Receipt:</h3>
<div data-role="fieldcontain"> Upload Reciept </div>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save Claim Item</li>
</ul>
</div>
</div>
</div>
</body>
</html>
When a user clicks the Original receipt component, it will correctly display the dialog called uploadRecieptDialog.html and the code for that is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b" data-position="fixed" >
<h1>Upload Reciept</h1>
</div>
<div data-role="content">
<p>Click the button below to select and upload your Reciept</p>
<h3><a onclick="uploadTrue();" data-role="button" data-theme="c" >upload Reciept</a></h3>
<div data-role="footer" data-position="fixed" data-theme="b" >
</div>
</div>
</div>
</body>
</html>
Here is the updateDetailCarHire.JS
function uploadTrue(){
alert("upload true");
//load previous page
history.back(-1); return false;
alert("UPLOADED");
}
A simple JS as you can see that displays an alert message and goes back to previous screen. on iOS simulator and chrome/safari desktop web browser, it works!
I'm guessing your Javascript isn't executing because cordova is having a problem with your history command.
Check here: in Cordova 1.8.1 - Android history.back() not working
And possibly: Why is javascript:history.go(-1); not working on mobile devices?
Try using history.back();
EDIT: I don't see updateDetailCarHire.JS being included on any of those HTML pages.
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.
I have a problem with AJax/Json petitions with PhoneGap. I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cartelera</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="cordova-2.0.0.js">
</script>
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<script src="my.js">
</script>
<script>
$(document).ready(function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 1 </a></li>');
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 2 </a></li>');
$('#cargaDiv').html('<img src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/images/ajax-loader.gif" /> Cargando...'); // Loading message
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
})
</script>
</head>
<body>
<div data-role="page" id="cartelerafinestrat">
<div data-role="header">
Atras
<h1>IMF Finestrat</h1>
</div>
<div id="cargaDiv">
</div>
<div id="cartelera">
<ul id="ulCartelera" data-role="listview" class="ui-listview" data-theme="d" data_dividertheme="b">
</ul>
</div>
</div>
</body>
</html>
</pre>
I have added in config.xml (/res/xml/) my domain ("http://www.cinesimf.com/*") in the phonegap whitelist.
If I try the code in a navigator in my pc, it works OK, but in Android aplication nevers load.
Your problem depends on a general webkit (and modern browsers) issue.
If you want to do a json request to a cross-domain server you have to modify your manifest file on Android or your plist file non Iphone, inserting the allowed domains where you want to get your data.
You could also do a jsonp request to avoid manifests updates:
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php?callback=?",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
You can have a good explanation about jsonp there: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
in my hybrid app, i'm trying to change page in a multipage file using jquery mobile function changePage.
when i press the button it hides current pages and shows blank page. same if i'm hidding/showing divs using hide/show jquery functions.
it works perfect in pc web browsers. but in mobile app.
how can i change/show second page?
here is my code:
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="js/jqtouch/jqtouch.js" type="application/x-javascript"
charset="utf-8"></script>
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile-1.1.0.min.css">
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile.theme-1.1.0.min.css">
<link type="text/css" rel="stylesheet" media="screen"
href="js/jquery.mobile.structure-1.1.0.min.css">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery.mobile-1.1.1.js"></script>
</head>
<body>
<div id="TaskList" data-role="page">
<div data-role="header">
<h1>Dienos užduotys</h1>
</div>
<script type="text/javascript">
function showTaskDetails(id) {
$.mobile.changePage("#taskDetails", {
transition : "slideup"
});
}
</script>
<div data-role="content">
<div id="task_list" data-role="controlgroup">
<a data-role="button" onclick="showTaskDetails(1)" href="#">Name</a>
</div>
</div>
</div>
<div id="TaskDetails" data-role="page">
<div data-role="header">
<a href="#TaskList" data-icon="arrow-l" data-iconpos="left"
data-rel="back">Atgal</a>
<h1>Dienos užduotys</h1>
</div>
<div data-role="content">
<input type="text" value="" id="task_id" />
</div>
<div data-role="footer"></div>
</div>
</body>
UPDATE: seems like the problem appeared because of changePage function that is in login file.
If you have multiple pages of documents, only need to do this:
$.mobile.changePage("#taskDetails", {transition : "slideup"});
$.mobile.changePage("file1.html", {transition : "slideup"});
$.mobile.changePage("file2.html", {transition : "slideup"});
......