How can I control the back button event in jQuery Mobile?
Recommended method
pagecontainerbeforechange
: https://jqmtricks.wordpress.com/2014/12/01/detect-back-navigation/
You need to listen to the navigation
event and state.direction
.
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// Do something
}
if (direction == 'forward') {
// Do something else
}
});
jQuery Mobile API: Navigation event
Demo
Take control of the hardware back button using jQuery Mobile
You should be able to capture the hardware back button click event with JavaScript:
$(document).bind('keydown', function(event) {
if (event.keyCode == 27) {
// Prevent default (disable the back button behavior)
event.preventDefault();
// Your code to show another page or whatever...
}
});
jQuery Mobile and Android device back button with build.phonegap.com
You will want to add an event listener for the back button:
document.addEventListener('backbutton', backButtonCallback, false);
Then create a function to run whatever you want when it's clicked:
function backButtonCallback() {
navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}
And then a callback to close the app if the user wants to:
function confirmCallback(buttonIndex) {
if(buttonIndex == 1) {
navigator.app.exitApp();
return true;
}
else {
return false;
}
}
Additionally for PhoneGap Build you will want to add this to your config.xml file:
<gap:plugin name="org.apache.cordova.dialogs" />
This will allow for the use of the confirm notification.
UPDATE:
Here is a light mod to your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" charset="UTF-8"/>
<link rel="stylesheet" href="themes/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="cordova.js">
<script>
function onLoad() {
document.addEventListener('deviceready', deviceReady, false);
}
function deviceReady() {
document.addEventListener('backbutton', backButtonCallback, false);
}
function backButtonCallback() {
navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}
function confirmCallback(buttonIndex) {
if(buttonIndex == 1) {
navigator.app.exitApp();
return true;
}
else {
return false;
}
}
</script>
</head>
<body onload="onLoad()">
You need to make sure you include the cordova.js
always, and then using the event listener for device ready will ensure cordova is loaded before you do anything with the API. This should work now.
Related Topics
How to Geocode 20 Addresses Without Receiving an Over_Query_Limit Response
How to Include HTML in a Js Rails Response
Why am I Getting Weird Result Using Parseint in Node.Js? (Different Result from Chrome Js Console)
Rails 4 - Gmaps4Rails - Map Won't Render
Rake Db:Create - Could Not Find a JavaScript Runtime
Encrypting Data with Ruby Decrypting with Node
How to Prevent Closing Browser Window
Using Queryselectorall to Retrieve Direct Children
Time Conversion Between Ruby on Rails and JavaScript Vice Versa
How to Run JavaScript Inside Swift Code
JavaScript in Wkwebview - Evaluatejavascript VS Adduserscript
Javascriptcore Call Function with Callback Swift
Ruby Methods Within JavaScript Within Haml
How to Use a Numeric Type as an Object Key
Access Parent's Parent from JavaScript Object