I have created an app with Jquery mobile 1.4.4 with PhoneGap.The app have multiple pages (each page in sparate html file).I am calling/navigating each page using
$.mobile.changePage( "templates/login.html", { transition: "slide", changeHash: false });
When I am using back button in android to goback to previous page it exit the whole app.
I have followed the solutions mentioned here Phonegap Android Back Button - close app with back button on homepage
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
The above solution is not working.How can i handle back page option in android PhoneGap?
use like this
if($.mobile.activePage.is('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
history.back();
return false;
}
Related
InAppBrowser missing the "Done" button that returns user to the app when using on iPhone. It is getting getting stuck on the webpage.
.directive("navigateTo", function($ionicGesture){
return{
restrict: 'A',
link:function($scope,$element,$attr) {
var tapHandler = function(e) {
var inAppBrowser = window.open(encodeURI($attr.navigateTo),'_blank','location=no', 'toolbar=yes');
};
var tapGesture =$ionicGesture.on('tap', tapHandler, $element);
$scope.on('$destroy', function(){
$ionicGesture.off(tapGesture, 'tap', tapHandler);
});
}
}
})
This is all the code for InAppBrowser. I call the navigateTo from one of the views in my app to open a link to a webpage.
I am using Jquery Mobile 1.4 and I would like to create a button that sends the user to another page, and opens the panel on this new page once landed :
I am trying this :
$(document).on('pagecreate','#faq-page', function(){
$('#faqcontactus').on("tap", function() {
$( "body" ).pagecontainer( "change", "#welcome-page", { transition: "fade" });
$( "body" ).pagecontainer( "getActivePage" ).find('#mypanel').panel("open");
});
});
which goes to the page, opens the panel, but closes it instantly.
Can you help ?
Thanks
You can't do it after you initiate page change process. That process is asynchronous and pane open will not wait for this function to end. What you need to do is wait for next page to became visible, then you should trigger panel.
Something like this:
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
var activePageId = activePage .attr('id')
if(activePageId === 'welcome-page') {
activePage.find('#mypanel').panel("open");
}
});
You should wait until page is fully loaded before you open the panel, i.e. use pagecontainershow.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activePage[0].id == "welcome-page") {
$(".ui-panel", activePage).panel("open");
}
});
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");}
}
I am using jquery.blockUI.js to show a popup for mobile application. Popup is shown when I click on button. But when I try to hide that popup on clicking outside that popup then it does not hide.
I am using this code to hide popup:-
jQuery('.blockOverlay').attr('title','Click to unblock').click(jQuery.unblockUI);
It works perfectly in desktop version of magento but Doesn't work for mobile theme.
Please help me how to solve this problem.
Try something like this..
function togglePopup(){
var selector = '#popup',
$popup = $(selector),
callback = function(e) {
if (!$(e.target).parents().andSelf().is(selector)) {
$popup.hide();
$(document).off('click', callback);
}
};
$popup.toggle();
if ($popup.is(':visible')) {
$(document).on('click', callback);
}
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)