I have a strange problem with an app developed using phonegap and jquery mobile:
when the app starts, styles are not applied but if I browse within the app and then go back to the index, I can see styles well applied.
What should I change?
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var intervalloRefresh;
var intervalloRisultati;
var iter=0;
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="pulsantiera" data-role="controlgroup" data-type="vertical">
<!-- Allineamento -->
Allinea
Percorsi
Programma
Info
Foto
Chat
Y
A
N
</div>
<div style="width:74%;height:100%;margin-left:26%" >
<h1 id="title">PATH</h1>
<div id="content">
<img src="images/IT_MAPPA.jpg">
</div>
<div id="vote" stle="display:none"></div>
</div>
</div>
</div>
</body>
</html>
Have you tried switching the position of your CSS and JS files?
If parsed from top to bottom:
1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded
So the CSS needed for the JQM widgets is not there when JQM kicks into gear.
Try switching to:
1) all CSS
2) jquery
3) jquery mobile
Also check the JQM page template. The CSS always goes first.
Related
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
I am using phonegap 3.3.0.0.19.6 on a Windows 8 platform. I have Nexus 7 connected via usb to test my app.
I have issue invoking any javascript code using onclick. I have tried to display a simple alert box, which doesn't work. I have then followed the phonegap tutorial:
http://docs.phonegap.com/en/3.0.0/cordova_notification_notification.md.html
I have found similar questions within the following links. However the solutions within these posts, do not answer my current issue with phonegap.
How to fix onclick in Phonegap/Android especially in lower versions of Android?
Android/ Phonegap - onClick() not working
Everything worked ok when I tried triggering a standard alert box in chrome. However, when I deploy to Nexus, no dialog box was displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial- scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
<title>Example Page</title>
<link rel="stylesheet" href="../www/css/themes/default/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="../www/css/themes/default/jqm-demos.css">
<link rel="shortcut icon" href="../www/favicon.ico">
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//wait for device api libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device apis are available
function onDeviceReady() {
// empty
}
function showAlert() {
navigator.notification.alert(
'Message box please display....', // message
altertDismissed, // no callback
'Message Box Title', // title
'Continue' // button texr
);
}
</script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Show Alert</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!-- /textWrapper -->
</body>
</html>
I have used plugman to install to install the plugin
plugman install --platform android --project example --plugin org.apache.cordova.dialogs
The nexus is running Android 4.4.2
At the moment I can not trigger any javascript code using onclick.
A solution using the native alert box or the standard alert message box would answer my question.
Thanks in advance
Try this one it will work
<!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>Insert title here</title>
<script src="../www/js/fontsize.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../www/js/jquery.mobile-1.4.2.min.js" type="text/javascript" charset="utf- 8"></script>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//wait for device api libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device apis are available
function onDeviceReady() {
// empty
}
function showAlert() {
navigator.notification.alert(
'Message box please display....', // message
altertDismissed, // no callback
'Message Box Title', // title
'Continue' // button texr
);
}
function altertDismissed(){
navigator.notification.alert("alert box is dismissed");
}
</script>
</head>
<body>
<div class="txtwrapper">
<div data-role="page">
<div data-role="header">
<h1>Example Page</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Show Alert</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!-- /textWrapper -->
</body>
</html>
just copy this and replace it will work.
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click.
Code i have now:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p>Show alert</p>
</div>
</div>
</body>
</html>
I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function.
Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called.
Anybody has any ideas?
onDeviceReady() is only called once (when the device (ie Cordova) is ready). You'll want $(document).on('pageinit', '#pageid', function() { }); for something to fire every time the page is navigated to.
In the body tag you need to add tag and the onBodyLoad() function in the javascript should be like:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
I am a total noob with phone gap and query mobile, so i made a stupid mistake. Problem is, that it loads not whole page, when i click on button, but only body part. This means, that it uses only javascript which is in the first page. And that was my problem. Now i have putted all javascript into separate file (all javascript for both files) and it works.
Try the following with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
$(function() {
$("#my_link").click(function() {
showAlert();
});
});
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p><a id="my_link" href="#" data-role="button">Show alert</a></p>
</div>
</div>
</body>
</html>
Hope this helps. Let me know about your results.
Even though i had z-index set higher for the md-button it still wouldn't click on iOS. It clicked fine on Android. I had to set a parent container in my case the <md-subheader> to z-index: -1; then it worked.
I am attempting integrate jQuery Mobile into an existing mobile page. I want to use the collapsible element, and form features.
When I include the js file, and load the page, the page is rendered blank. When it is not included it is rendered correctly. I have added data-role="page" and "content" as below:
Looking in Firebug I see the body element has the 'ui-mobile-viewport' class on it and it's visibility is set to hidden; its child elements have display = none.
I am getting this error in the console when debugging (line 5014) of jquery-mobile-1.0.1.js:
$el.prop is not a function
if ( $el.prop("disabled") ) {
Code below:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><%=PageTitle%></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<link rel="stylesheet" type="text/css" href="<%=CssPath%>/jquery.mobile-1.0.1.css" media="screen" />
<script type="text/javascript" src="<%=JsPathShared%>/jquery.js"></script>
<script type="text/javascript" src="<%=JsPath%>/page.js"></script>
<script type="text/javascript" src="<%=JsPath%>/jquery.mobile-1.0.1.js"></script>
</head>
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div data-role="page" id="page-wrap" >
<header>
<%RenderBanner();%>
</header>
<div data-role="content" class="section-wrap">
<%Render();%>
<footer>
<nav>
<%RenderNavigation();%>
</nav>
<%RenderFooter();%>
</footer>
</div>
</div>
<%=GoogleAnalytics()%>
</body>
</html>
Consider checking out the jQuery Mobile Boilerplate project from Github. It contains a complete jQuery Mobile project along with code snippets you can use to compare your code to a working project.
https://github.com/commadelimited/jQuery-Mobile-Boilerplate