I have the following code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
if ($.mobile.activePage.attr("id") === "home") {
e.preventDefault();
navigator.app.exitApp(); //not working
}
}
My onBackKeyDown() function is being entered, now I'm getting a series of strange events:
My if condition is never entered, even when my $.mobile.activePage.attr("id") === "home" is true (tested on weinre server)
navigator.app.exitApp never works, this seems to happen across my whole app, not just this one function.
Back button is unresponsive all over my app.
Any idea why I'm getting this strange behavior? Phonegap 2.6, jquery mobile 1.3.0 and testing on an Android 2.3.7.
In my testing here
if ($.mobile.activePage.attr("id") === "home") {
works perfectly.
Already "navigator.app.exitApp ()" will not really work because "navigator" refers to the browser itself, PhoneGap applications do not use browser but a webview.
But how applications behave differently on each OS version, try the following:
if(navigator.app){
navigator.app.exitApp();
}else if(navigator.device){
navigator.device.exitApp();
}
I'm testing html5 app with cordova and jquery mobile - for Android and Blackberry the following code working for me :
var ua = navigator.userAgent;
window.device = {
iphone: ua.match(/(iPhone|iPod|iPad)/),
blackberry7: ua.match(/91|93|97|96|97|9800|9810|9850|9860|99/),
blackberry10: ua.match(/BB|PlayBook|Tablet/),
android: ua.match(/Android/)
}
//window.device ready for blackberry
if (window.device.blackberry7){
document.addEventListener('deviceready', onDeviceReady, false);
}
//window.device ready for android
else {
window.addEventListener('load', onDeviceReady, false);
}
and then :
function onDeviceReady(){
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
document.addEventListener("searchbutton", onSearchKeyDown, false);
}
function onBackKeyDown(){
if (window.device.blackberry7){blackberry.app.exit();}
if (!window.device.blackberry7){navigator.app.exitApp();}
}
function onMenuKeyDown(){
if (window.device.blackberry7){alert("BB Menu key");}
if (!window.device.blackberry7){alert("Menu key");}
}
function onSearchKeyDown(){
if (window.device.blackberry7){alert("BB Search key");}
if (!window.device.blackberry7){alert("Search key");}
}
Related
I have the following code:
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady()
{
var uuid = device.uuid;
alert(uuid);
}
what am I doing wrong? Android operating normally.
From what I observed ios , is skipping the event deviceready
**I'm using PGB, and my config.xml it's ok*
Your deviceready code looks good to me, but I would suggest you drop the onLoad() function and just call that directly when the script loads.
For example, I created this using the Cordova demo app and it's working well on iOS simulator:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
alert(device.uuid);
}
};
app.initialize();
I have an app that's making calls to my server.
When I press the home button and then reopen the app, I'd like it to check the server again.
I've tried the code below but the onResume doesn't seem to even run.
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("resume", onResume, false);
}
// Handle the resume event
//
function onResume() {
// Call to the server
}
I ended up finding success using
document.addEventListener("resume", function() {
// Action when resumed
});
and it worked perfectly!
I have a website that uses jquery mobile to detect touch interaction.
It works fine when I test it on the desktop, but when I try to use it embedded in a Windows Phone 8.1 WebView App, no touch events are triggered.
What am I missing here?
-edit-
ok here is some code I am using:
<script>
$(function () {
jQuery(window).on("swipe", function (event) { NotifyApp("Test"); });
});
</script>
The called NotifyApp function looks like this:
function NotifyApp(message) {
if ((typeof (window.external) !== "undefined") && (typeof (window.external.notify) !== "undefined")) {
window.external.notify(message);
}
}
NotifApp() works as expected, the app is notified by this function when I call the it manually by a button.
In my application i'm creating a WL.TabBar object for iOs and Android environments, like a navigation menu. To emulate the back-button of jquery i'm using a simple function like this
function back(){
history.back();
return false;
}
function forward(){
history.forward();
return false;
}
in iOs emulator it works but in Android no. I'm using an Android 2.2 virtual device.
EDIT:
here is the code on android/js/[AppName].js file, also the same of iOs environment.
function wlEnvInit(){
wlCommonInit();
// Environment initialization code goes here
navigation.init();
navigation.addItem("item1",back,"Back",{});
navigation.addItem("item2",forward,"Forward",{});
navigation.setVisible(true);
}
var navigation = WL.TabBar;
function back(){
window.history.back();
return false;
}
function forward(){
window.history.forward();
return false;
}
This problem seems to be unique to Android 2.x. Your code works fine on Android 4.x. For some reason, windows.back()/windows.forward() has no effect when called directly out of the tab bar click handler on Android 2.x. You can work around this by using a short timeout:
function back() {
setTimeout(function() {
window.history.back();
}, 100);
return false;
}
function forward() {
setTimeout(function() {
window.history.forward();
}, 100);
return false;
}
I am developing a Android app using Jquery Mobile/Phonegap. I have the following code to control the phone's back button:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
$.mobile.changePage("#homepage", "slideup");
}
This all works fine, but I would like the app to close when pressing the back button on the homepage only, is this possible?
Update: this has stopped working with a latest Phonegap update (supposedly). Feel free to offer a working solution if you know it.
Here's how I do it:
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
/*
Event preventDefault/stopPropagation not required as adding backbutton
listener itself override the default behaviour. Refer below PhoneGap link.
*/
//e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
For further information, here you can find the related documentation with a full example: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#backbutton
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown()
{
navigator.app.exitApp();
}
Thank you spader.
You would need to keep track of when the homepage is being displayed. When you know you are on the homepage call:
navigator.app.exitApp();
If you don't want to use jQuery Mobile, change $.mobile.activePage.is('#homepage') to document.getElementById('#homepage') on #Spadar Shut answer, as on following code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if(document.getElementById('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
}
Through this way, don't need to download Jquery Mobile gibberish only for this purpose. Also, activePage is deprecated as of JQuery mobile 1.4.0 and will be removed from 1.5.0. (Use the getActivePage() method from the pagecontainer widget instead)