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!
Related
I'm trying to show ads in the app built with jquery mobile using Cordova. I'm using the Cordova-Admob-plus plugin to show ads. The plugin works fine when I use the onsen UI to build apps. But when I use Jquery Mobile the ads do not show.
I don't know why the ads do not work when I use the Jquery Mobile framework to build the app. I think it has something to do with the javascript function which is not working in jquery Mobile. But I am not able to find out the actual problem.
index.html file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>App</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/cont.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css">
<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.min.css" />
<script src="js/onsenui.min.js"></script>
<body>
<div data-role="page" id="homeIndex" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>SCHOLARSHIPS PAKISTAN</h1>
</div>
<div class="app">
<div id="deviceready" class="blink">
</div>
</div>
<div data-role="main" data-role="content" class="ui-content" data-theme="a">
<div class="app">
<div id="deviceready" class="blink">
</div>
</div>
All Scholarships
Merit Based Scholarships
Need Based Scholarships
HEC Local Scholarships
HEC Foreign Scholarships
PEEF Scholarships
University Scholarships
Undergraduate Scholarships
Post Gardauate Scholarships
Engineering and IT Scholarships
Medical Scholarships
Business and Management Scholarships
</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1 id="title">Error</h1>
</div>
<div data-role="content" id="content">
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/pinch-zoom.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
index.js file to show ads
'use strict'
const app = {
initialize() {
document.addEventListener(
'deviceready',
this.onDeviceReady.bind(this),
false,
)
},
onDeviceReady() {
this.receivedEvent('deviceready')
this.showAds()
this.checkIsLoaded()
this.showAdsOld()
},
checkIsLoaded() {
return admob.interstitial.isLoaded().then(result => {
console.log(result)
return result
})
},
showAds() {
const banner = new admob.BannerAd({
adUnitId: 'ca-app-pub-5517499679401400/9842406242',
})
banner.show({ position: 'top' })
},
showAdsOld() {
admob.interstitial
.load({ id: 'ca-app-pub-5517499679401400/3866534140' })
.then(() => admob.interstitial.show())
.catch(console.log)
},
receivedEvent(id) {
const parentElement = document.getElementById(id)
console.log(`Received Event: ${id}`)
},
}
app.initialize()
I think you should try the cordova Admob-pro plugin. It is easy and faster to use.
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 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 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;
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"});
......