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.
Related
I am trying to generate an apk for a polymer app using cordova. But i am facing difficulty as the generated apk is not able to render properly in the mobile application (Android version 6.0 which is > 4.1 which is supported by Polymer). I referred this for building the app but it did not work. The polymer app is woking as expected in the web browser but when in apk form in a mobile it does not work.
Contents of Index.html
<html>
<head>
<title>myApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/src/main-app/main-app.html">
<link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/bower_components/gold-phone-input/gold-phone-input.html">
</head>
<body class="app">
<paper-header-panel class="flex">
<paper-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<!-- flex class forces span to fill space between icons -->
<span class="flex">Title</span>
<!-- icon displays at right because of span class above -->
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="0">
<paper-tab>ONE</paper-tab>
<paper-tab>TWO</paper-tab>
</paper-tabs>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
<gold-phone-input country-code="91" phone-number-pattern="XX-XX-XXXXXX">
</gold-phone-input>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
I have also tried adding Crosswalk to Cordova but it still does not work.
Please let me know if any more information is required.
Will Appreciate any help.
Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.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, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This:
Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.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, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This:
I've made some differents Apps with PhoneGap, and ALWAYS when running the App (on the AVD emulator and the Android Phone itself) when the App is starting, it's like someone press the "Android Context Menu Button" that opens a Context Menu...
I've been searching a lot, but I have not found a solution. Anyone knows why this is happening to me?
(It doesn't happen with the "Hello World" App that comes by default)
The only plugin I have in the Plugin Folder it's android.json (which is the platform plugin I believe)
And here's the part of the App with the definitions...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=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, width=device-width, height=device-height, target-density dpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Ctrl</title>
<script src="js/debug.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<link href="js/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="cordova.js"></script>
Thanks
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