How to make Android phone's back button work using Ajax in Javascript?

Question

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() {}

score 0 · Answer 1 · answered Jul 04 '17 at 07:53

0

I think the problem here is the page is in the DOM, but is not being shown.

if (document.getElementById('#homepage')) {

You could check if this HTML Element has a class or a specific style when you're on another page.

If you're using ajax, I suppose this HTML Element will have a hidden class or a display: none style, so I hope one of these will work for you:

document.querySelectorAll('#content[style="display: none;"]') document.querySelectorAll('#content.hidden')

answered Jul 04 '17 at 07:53

dloeda

1,516
15
23

Can you please explain what this querySelectorAll means? and how to use it in my code? – Zac Jul 05 '17 at 04:19
Yes, `querySelector`/querySelectorAll` is similar to `getElementById` (id search) but you can search HTML Elements by class, attributes, styles too. So you can filter your `#content` div by another properties that changes when the is page change its visibilty. – dloeda Jul 05 '17 at 06:56

score 0 · Accepted Answer · answered Jul 04 '17 at 11:49

0

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 });
    }

}

answered Jul 04 '17 at 11:49

Yusril Herlian Syah

497
1
6
12

Can you please explain the 'mainView.activePage.name == 'yourhomepagename'' line? It doesn't work in my code. If I enter the homepage loop,then the "Are you sure you want to exit?" will appear on all pages right? That's not what I want. If I disable that "mainView.router.back" works. Pleas explain that line. 2) I haven't initialized the mainView, so how does it work?! – Zac Jul 05 '17 at 04:38
page name is come from data-page="...". mainView.activePage.name is mean current page name we used – Yusril Herlian Syah Jul 05 '17 at 04:53
Hi, do you know how mainView... works? I've not initialized this view but still works somehow? – Zac Jul 05 '17 at 05:33
mainView is container view for framework 7 application. All page will loaded into mainView. If you are not initialized that you can use `myApp.getCurrentView()` on your case maybe `mainView.activePage.name` should changed into `myApp.getCurrentView().activePage.name` – Yusril Herlian Syah Jul 05 '17 at 05:53
Awarded bounty - thanks! In mine, it was already initialized by default. – Zac Jul 05 '17 at 05:57

How to make Android phone's back button work using Ajax in Javascript?

2 Answers2