I have the following code to handle the back button of devices from Framework 7 in Javascript. I'd like to know if all subsequent pages are using Ajax, how do I use the back button to move back to my earlier page. At the moment, pressing the Back button, always prompts for the user if he wants to exit the app. The app has 20 pages, but they are all shown as Ajax pages and not a HTML page.
<!-- We don't need full layout here, because this page will be parsed with Ajax-->
Please help. Thanks for the help!
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
}
// Handle the back button
function onBackKeyDown(e) {
e.preventDefault();
navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No");
//navigator.app.backHistory();
if (document.getElementById('#homepage')) {
e.preventDefault();
navigator.app.exitApp();
navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No");
} else {
navigator.app.backHistory();//This line doesn't work when tried on the if function - it seems useless - maybe not supported anymore?
//the code never gets here coz other pages are simply loaded as Ajax, and there is only 1 index.html - how to fix?
}
}
function onConfirm(button) {
if (button == 2) { //If the user selected No, then we just do nothing
return;
} else {
navigator.app.exitApp(); // Otherwise we quit the app.
}
}
// Handle the menu button
function onMenuKeyDown() {}
On framework 7 application you can handle back button to back to your earlier page using mainView.router.back()
.
function onBackKeyDown(e) { if(mainView.activePage.name == 'yourhomepagename') { e.preventDefault(); navigator.notification.confirm("Are you sure you want to exit?", onConfirm, "Confirmation", "Yes,No"); } else { mainView.router.back({ ignoreCache: true }); } }