I updated my code from jqm 1.3.2 to 1.4.0. To make sure that there were no issues after the upgrade I copied the navigation buttons to a test file. Sure enough, it does not work on the mobile browser on Samsung Galaxy 3 but works fine in Chrome. It also works fine in Chrome, FF 26.0, and IE 11 on a win 7 laptop. Here is my code -
<!DOCTYPE html>
<html>
<head>
<title>whnwh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<div data-role="page" id="p_home" data-title="when n where" data-theme="a">
<div data-role="header"><!-- header -->
<p />
<img src="images/logo.png" />
</div><!-- /header -->
<div role="main" class="ui-content">
<div data-role="controlgroup" data-mini="false" data-corners="false" data-type="horizontal"><!-- navbar -->
home
my calendar
add
sign in
sign out
</div>
</div><!-- /navbar -->
</div><!-- page p_home -->
</script>
</body>
</html>
This is how the above page looks in Galaxy browser -
and in Chrome on Galaxy as well as all browsers on laptop -
So, what can I do to fix this?
Thanks in advance.
RD
I guess either no one has run into this problem or no one has an answer.
I have lost a day in migrating and fixing all incompatibilities between 1.3.2 and 1.4.0.
I am frustrated, will revert back to 1.3.2 jqm and take this task on at some later time.
You are not alone!
The following configuration was incompatible with my android galaxy 2.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
I tested jquery-1.10.2.min.js separately and it works just fine. It's only because of jquery.mobile-1.4.1.min.js.
Previous jquery mobile version will work which is
<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>
Related
Environment:
Worklight 6.0
Dojo 1.9.1
ADT 22.0
API level 14
Device - Samsung Tab 3
We have developed a mobile app using worklight 5.0 and dojo 1.8.
Now we have upgraded to worklight 6.0 and dojo 1.9. After upgrade we are seeing following issue while rendering dojo widgets.
The widgets are getting rendered fine in simulator (MBS). But on the actual device, the widgets are not getting rendered properly. The tab bar buttons are getting rendered as labels with bold underline etc.
The HTML file -
<head>
<meta charset="UTF-8">
<title>RQMOffline</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/MobileApp.css">
<link rel="stylesheet" href="css/qmMobile.css"/>
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, mblThemeFiles:['#theme',['qm.mobile','qmMobile']], async: true, parseOnLoad: false, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="AppBody" >
<div id="localTestList" data-dojo-type="dojox.mobile.View" style="selected:true" >
<div id="mainViewHeadning" data-dojo-type="dojox/mobile/Heading" fixed="top">
<ul id="filtersBar" data-dojo-type="dojox.mobile.TabBar"
data-dojo-props='barType:"segmentedControl"'>
<li id="runTabBarButton" data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='label:"labelInProgress", moveTo:"downloadedTestListView", selected:true'></li>
<li id="resultTabBarButton"
data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='label:"labelCompleted", moveTo:"uploadResultListView"'></li>
</ul>
</div>
<div id="tabBarNode" data-dojo-type="dojox/mobile/Heading" fixed="bottom">
<ul id="mainTabBar" data-dojo-type="dojox/mobile/TabBar" single="true">
<li id="mainShowTcerList" data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props='icon1:"images/download-act-d.png", icon2:"images/download-act-e.png", label:"labelGetTests", moveTo:"getTestsListView"'></li>
<li id="mainShowLocalTest" data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props='icon1:"images/run-act-d.png", icon2:"images/run-act-e.png", label:"labelRunTests", selected:true'></li>
<li id="mainShowSettings" data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props='icon1:"images/setting-act-d.png", icon2:"images/setting-act-e.png", label:"labelSettings", moveTo:"settingsView"'></li>
</ul>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/MobileApp.js"></script>
<script src="js/messages.js"></script>
</body>
Note: I have added all the android related css file under www folder.
This was working fine with dojo 1.8
Any help on this will be appreciated.
I fixed this issue by doing following changes -
In dojox/mobile/deviceTheme.js, replaced "holodark" with "android" for all android devices.
For bigger font size issue, added 'targetSdkVersion' attribute to property in AndroidManifest.xml - <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="13"/>
Thanks all for your help.
I am trying to building an android app with jquery mobile in phonegap . My code is working well in browser , but when I tried to run it on android emulator it is not working . This is how it looks on browser and in android emulator
http://i58.tinypic.com/2ci8pl0.jpg
<head>
<meta charset="utf-8" />
<title>View Source</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="_/css/jquery.mobile.css" />
<link rel="stylesheet" href="_/css/mystyles.css" />
<script src="_/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="_/js/myscript.js"></script>
<script src="_/js/jquery.mobile.js"></script>
</head>
This is the head section of my index.html file .
I have linked all the files correctly . But I don't know whats the problem
I was having the exact same problem and was struggling with it for a whole day until I decided to run on an actual android device and....
Problem is gone!
Must be an emulator issue.
Jquery mobile styles are not rendering in android App when storing the jquery mobile css and js file locally in assets folder of android project. But the same is working by including the jquery mobile files from CDN. Help me
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="file:///android_asset/www/js/cordova-2.7.0.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.3.2.min.js"></script>
<!-- <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>
<script src="js/TamkeenJQ.js"></script>
-->
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
<button onclick="changePageFn()">Change Page</button>
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
</html>
First add the jquery css files.
Then add the jquery 1.9.1 js file.
then add the jquery mobile 1.3.2 js file.
Actually it looks some issue in your implementation.
If you have included the correct path of your js and css files related to jquery mobile.
Solution: Reverify the path of js and css files.
Use the following order in the head tag
<link rel="stylesheet" href="css/jquerymobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquerymobile-1.3.2min.js"></script>
Is it possible to use Google Maps API V3 for mobile app development when using PhoneGap/Cordova? My index page has a link to a map page that has the following in it:
<!DOCTYPE html>
<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" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Map Page</title>
</head>
<body>
<div class="app">
<div id="map-canvas"></div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
$('#map-canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':false, 'callback': function() {}});
</script>
</body>
</html>
I'm including the Google Maps jQuery plugin and the other necessary files. When I test the app in my desktop browser, Ripple, and (mysteriously) on my old Samsung Galaxy S the map loads up just fine. When I try it in the Android emulator or on an Galaxy S4 the map does not load and I am left with an empty white page. Is there a different/better way I could be using Google Maps on and Android app or is there something I need to change in my above code? Thanks.
Change your script tag to:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />
I believe the one you are using is for v2 as stated here
In my case the google apis couldn't be loaded because the app didn't had permission to access the internet.
So dont' forget to add internet access permission to your app in your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
And for other features (location, camera,...) make sure the corresponding permission has been set for this app and device
I want to load the entire contents of a web page on my HTML page. I use iframe to do this. I test on android 2.3 is normal. But when tested on android 4.0 or higher, that does not load the site anymore and instead white screen. I use PhoneGap cordova to do this. I'm using 2.8.1 cordova.
My Code file index.html
<!DOCTYPE HTML>
<html>
<head>
<title>com.PhoneGap.c2dm</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="GCMPlugin.js"></script> <!-- GCM Cordova plugin -->
<script type="text/javascript" charset="utf-8" src="jquery_1.5.2.min.js"></script>
<!-- Include my Javascript routines -->
<!--<script type="text/javascript" charset="utf-8" src="GCMPlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="CORDOVA_GCM_script.js"></script> -->
</head>
<body>
<iframe src="http://m.kqxs.vn"></iframe>
</body>
</html>