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']);
Related
I have an iOS or Android app we would want to show installation banner when users visit your website via mobile browser.
I try to use this plugin :
https://github.com/jasny/jquery.smartbanner
<html>
<head>
<title>YouTube</title>
<meta name="author" content="Google, Inc.">
<meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
</body>
</html>
I need when any user install my app. show view icon ,But if user not install it , show him download
How can do that
I have a html page, I want to launch my native app when loading this page. the following is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
</head>
<body>
<br><br><br>
<a id="link1" style='display:none' href="baidufe://schemedemo/get/info?id=10000">test link</a>
<br>
<button onclick="launch()">Launch</button>
</body>
<script language="JavaScript">
function launch(){
console.log("test");
var clickTarget = document.getElementById("link1");
clickTarget.click();
};
window.onload=function(){
launch();
};
</script>
</html>
But when i open this page in android chrome(version is 49), my native app isn't launched. when i click the "Launch" button, my native app can be successfully launched.
what's root cause? but my requirement is native app will be launched when opening this page, how to fix it? Thank!
That seems like a rather indirect way to accomplish that you want...instead of simulating a click event, why not set the window location directly and skip a step?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
setTimeout(function() {
window.location = 'baidufe://schemedemo/get/info?id=10000'
}, 250);
</script>
</html>
Keep in mind automatically redirecting users this way has a ton of edge cases, and may show a nasty 'Page could not be found' error if they don't have your app installed.
I am using cordova for mobile app development on android platform.
I have this html code in www/index.html file:
<!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" />
<meta http-equiv="Content-Language" content="en" />
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="JS/main.js" type="text/javascript"></script>
<link rel="stylesheet" href="CSS/main.css"/>
</head>
<body id="body" class="body">
<div id="box" class="bodyBlack">
</div>
</body>
</html>
I don't know why but when I am running this app (also when just opening on pc browser) i am having this div appended at the bottom of the page:
<div ui-loader ui-corner-all ui-body-a ui-loader-default>
<span ui-loader ui-corner-all ui-body-a ui-loader-default></span>
<h1>loading</h1>
Here is the content of main.js:
$(document).ready(function(){
$('#box').click(function(){
if($(this).attr('class') == 'bodyBlack'){
$(this).removeClass('bodyBlack');
$(this).addClass('bodyWhite');
}
else{
$(this).removeClass('bodyWhite');
$(this).addClass('bodyBlack');
}
});
});
Why and from where dose it getting from? how I am preventing it to do so?
Thanks!!!
This seems to be a "Loading Message" generated by jQuery Mobile, see this answer. So jQuery Mobile is loading something (and cant't find it, perhaps). Please post the content of your main.js file if you're still having trouble!
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.
I am using JQM 1.1.0 and Cordova 1.5.0.
I have code like this
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
$("#page1").live("pageinit", function(e) {
console.log("pageinit1");
}
$("#page2").live("pageinit", function(e) {
console.log("pageinit2");
}
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content"></div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content"></div>
</div>
</body>
This code is working fine for Android. but in iOS,as soon as the page loads then the pageinit event of page1 doesnt get fired and later on if i changepage to page2 then everything is fine.. Why is this happening?
am not so sure about that but as i know live function has changed in JQ1.7.x and now you will have to use the on() function which has small changes to the way you code your code ..
I just need to write my javaScript functions after data-role="page" to make it working...