I've got a Phonegap (Cordova 2.0.0) app, built for Android, running with jQuery Mobile + Backbone.js. When I test it on the emulator, it works correctly (runs as in the browser, CSS and JS appear, etc).
When I sign it and install it on a non-debug device, it runs but without the CSS and JS (so basically shows an unstyled HTML document which doesn't run the JS).
The body of my app is as follows:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="libraries/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<script type="text/javascript" charset="utf-8" src="libraries/cordova-2.0.0-ios.js"></script>
<script src="libraries/jquery-1.7.2.min.js"></script>
<script src="libraries/underscore.js"></script>
<script src="libraries/backbone-min.js"></script>
<script src="libraries/backbone.localStorage-min.js"></script>
<script src="libraries/detect.js"></script>
<script type="text/javascript" src="libraries/sha1.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var jqmReady = $.Deferred();
var deviceReady = $.Deferred();
/**
* on load - manages dependency between jquery mobile and phonegap
*/
function onBodyLoad()
{
// get device
$.os = {};
$.os.android = navigator.platform.indexOf("android")>=0;
$.os.ios = navigator.platform.indexOf("iPhone")>=0 || navigator.platform.indexOf("iPad")>=0;
// listen to device ready
if ($.os.android || $.os.ios) {
document.addEventListener("deviceready", deviceReady.resolve, false);
}
else {
// must be in a browser, so immediately resolve
deviceReady.resolve();
}
}
$(document).bind("mobileinit", jqmReady.resolve);
$(document).bind("mobileinit", function() { console.log('mobileinit'); });
$(document).bind('pageinit', function() { console.log('pageinit'); });
// when jquery mobile and device ready, then fire
$.when(jqmReady, deviceReady).then(function() {
console.log('Ready');
// disable push state: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
$.mobile.pushStateEnabled = false;
App.init();
});
onBodyLoad();
</script>
</head>
<body onload="" data-lat="" data-lng="">
Has anyone come across this before? I was wondering if it's something to do with the relative paths (rather than absolute?) or how I package it together in Eclipse. Also, on an iPhone it works fine.
Thanks.
Related
MobileFirst app with Ionic crashes upon tapping android back button (which I override with App.overrideBackButton() ).
I wrote a very simple test app (new project, new workspace), first without Ionic then adding Ionic references: without Ionic everything works fine, no inherent errors in the console, with ionic I get two errors:
As soon as the app starts:
"Error in Success callbackId: App1084986710 : Error: Unknown event action undefined", source: file:///android_asset/www/default/worklight/cordova.js (309)
When I tap the back button (from page 2)
W/UnimplementedWebViewApi(21373): Unimplemented WebView method onKeyDown called from: android.webkit.WebView.onKeyDown(WebView.java:2389)
Updates:
If I remove WL.App.overrideBackButton(goBack); and WL.App.resetBackButton(); from the js functions both errors persist, and the app still crashes upon tapping the back button.
If I link/include the Ionic css and js but remove any Ionic content (no ng-app property, no app.js reference from index.html) the back button override works fine.
index.html
<!DOCTYPE HTML>
<html style="height:100%" ng-app="myTryOut" id="content">
<head>
<meta charset="UTF-8">
<title>TryOut</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="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/ionic.css">
<link rel="stylesheet" href="css/ionicons.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body onload="initLoad()">
<div id="container">
<!-- content will be loaded here -->
</div>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/ionic-bundle.js"></script>
<script src="js/app.js"></script>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<h2>Page 1</h2>
<button class="button button-block button-assertive" onclick="goToPage2()">Go</button>
</html>
page2.html
<!DOCTYPE html>
<html>
<h2>Page 2</h2>
<button class="button button-block button-assertive" onclick="goBack()">Back</button>
</html>
main.js
function wlCommonInit(){
}
function initLoad() {
goBack();
}
function goToPage2() {
$("#container").load("html/derp.html",function(){
console.log("I'm in page 2");
WL.App.overrideBackButton(goBack);
});
}
function goBack() {
$("#container").load("html/dorp.html",function(){
console.log("I'm in page 1");
WL.App.resetBackButton();
});
}
app.js
var myModule = angular.module('myTryOut', ['ionic']);
in an empty HTML page,i try to display a banner including the link of my app
I used this as tutorial:
http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android
For the moment, i just try to make it work locally, in an empty page. This is my page:
<html>
<head>
<title>Hulu Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Hulu LLC">
<meta name="google-play-app" content="app-id=MyAppIdIsHere">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function () {
$.smartbanner({
title: 'Audience Opinion',
author: 'Dunn Solutions Group'
});
})
</script>
</head>
<body>
</body>
</html>
My html page and the js/css files are located in the same folder. there is no problem of path.
Does anyone know why this code does not work ?
Thanks in advance!
The default option is to only display the bar on a either an Android or iOS device. If you open the page on a desktop, nothing appears. You can set the 'force' option to 'windows' in order to have it appear on your desktop.
$(function () { $.smartbanner({ daysHidden: 0, daysReminder: 0, title:'Hulu', force:'windows' }) })
All of the other options can be found on the github page: https://github.com/jasny/jquery.smartbanner
I'm developing an html5/JqueryMobile/Phonegap app. I have to detect the device language to redirect to a specific html. I'm trying to use Phonegap's navigator.globalization.getPreferredLanguage. On an iOS device it works fine.
The code below detects the language "onDeviceReady" and performs the redirect. This code should be universal for iOS and Android but when I try it on an Android device it doesn't work. The screen freezes. What might cause this?
<!DOCTYPE HTML>
<html>
<head>
<title>Language</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.globalization.getPreferredLanguage(
function (language)
{
if(language.value == "it")
{window.location.replace("index_it.html");}
else if (language.value == "ar")
{window.location.replace("index_ar.html");}
else
{window.location.replace("index_en.html");}},
function ()
{
alert('Error getting language\n');
}
);
}
</script>
</head>
<body>
</body>
</html>
Problem here, is that language received from Android will have different format, for example instead of Russian with code ru it will return русский
I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
I've tried to setup Phonegap on Android and deviceready won't fire. The reason is that DeviceInfo.uuid is always null/undefined.
It seems like the non-javascript parts of phonegap isn't loaded correctly, but I can't see exactly what. For everything outside the www directory I'm using the code provided in the sample directory of the phonegap download.
Anyone know what may be causing this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap-1.0.0.js"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#something"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
var initialize = function() {
window.console.log("deviceready||resume");
};
document.addEventListener("deviceready", initialize);
document.addEventListener("resume", initialize);
window.console.log("onBodyLoad!");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Herro World</h1>
</body>
</html>
In case someone else stumble on this problem.
I hadn't realized that phonegap-1.0.0.js is different for the iPhone and Android version. It has the same name, but the content is different. Thus, one must load the correct file. I solved it like this:
<script type="text/javascript">
// Atrocious way of loading two diffent phonegap scripts, but other loading methods won't work.
// also there shouldn't be two scripts to begin with -- so much for cross-platform.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.match(/android/)) {
document.write("<script type='text/javascript' src='javascripts\/phonegap-android-1.0.0.js'><\/script>");
} else {
document.write("<script type='text/javascript' src='javascripts\/phonegap-iphone-1.0.0.js'><\/script>");
}
</script>
If you want some function to execute when the device is ready do something like this
document.addEventListener("deviceready", onDeviceReady, true);
// PhoneGap is now ready
function onDeviceReady() {
// Write your code here
}
I am not sure why your code is not working.Try placing the document.addEventListener outside the scope of the function.