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"});
......
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'm a newbie. I want to save a value inputted by the user in the preferences manager, and have it automatically populate a field(if it has been filled by the user). I get a "ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html:53" in my Android logcat. Also my app crashes. What am I doing wrong?
<html>
<head>
<meta 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="css/index.css" />-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
<title>Hello World</title>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
//once the device ready event fires up, you can safely do your thing
function onDeviceReady(){
//document.getElementById("welcomeMsg").innerHTML += "Phonegap is ready! version=";
}
$(function(){
$('#savebutton').click(function(){
//this is where the user manually keys in values, do error checking here
window.localStorage.setItem("user_lat", $('#user_lat').val());
});
//called when the page is being shown
$('#newpage').live('pageshow', function(){
var userLat = window.localStorage.getItem("user_lat");
if (userLat.length > 0){
$('#user_lat').val(userLat);
}
});
});
</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
Hola Phonegap & Jquery mobile!
Go to new page
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<!--2nd page-->
<div id="newpage" data-role="page">
<div data-role="header">
<h1>Manually specify your GPS coordinates</h1>
</div>
<div data-role="content">
<label for= "user_lat">Latitude:</label>
<input type="text" name="user_lat" id="user_lat" value=""/>
<a id ="savebutton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
</body>
If '$' isn't defined I don't think that jQuery is being loaded correctly..
Try:
if ( $.mobile ) {
// loaded
} else {
// not loaded
}
to check if jQuery mobile is loaded, or try this for normal jQuery:
if (!jQuery) {
alert("jQuery is not loaded");
}
You need to include jQuery in your page in order to use $ (jQuery) which you did not. You can add the script tag and give the url of jquery in src attribute. Add this tag in head tag so that it is added before it is required.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
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.
I am using jQueryMobile and PhoneGap to develop a cross platform mobile app. I am binding to the first page that is loaded in the app (the 'home' page) but the pageinit event does not fire. Here's my custom javascript:
$('#home').live('pageinit', function()
{
alert('firing pageinit');
}
Here's my index.html file with the page definition:
<!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" />
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
Refresh
<h1>MyListingsApp</h1>
Add
</div>
<div data-role="content">
<ul data-role="listview" id="listings" data-filter="true" data-filter-placeholder="Filter listings...">
<li id="hit_to_begin"></li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.ui.map.services.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
The event does not fire and all I get is the loaded homepage. According to the jQueryMobile docs this is proper binding to handle customization on page initialization.
Look at this example: http://jsfiddle.net/Gajotres/BGkaq/, I made you 2 examples, you can find them at the bottom of the page.
Event binding example 1:
// in (url^=home) home is a page id
$(':jqmData(url^=home)').live('pagebeforecreate',function (event) {
alert('Event has been triggered!');
});
Event binding example 2:
$('#home').live('pagebeforecreate',function (event) {
alert('Event has been triggered!');
});
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!