Phonegap Android with JQuery - Unable to Capture / Program Back and Menu Keys

Question

I have started using JQuery in my Phonegap mobile application, and since I have done so I am unable to Capture or Program Back & Menu keys. I have tried all the solutions mentioned here without success.

Currently this is what I have (onload is calling from ):

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
    return;
}

function onDeviceReady() {
    document.addEventListener("backbutton", onBackKeyDown, false);
    document.addEventListener("menubutton", onMenuKeyDown, false);
}

function onMenuKeyDown() {
    $("#AudioPopup").popup("open");
    return;
}

function onBackKeyDown() {
    $("#AudioPopup").popup("open");
    return;
}

It was working fine before moving to JQuery mobile.

Any help will be appreciated.

Thanks!

AR

score 0 · Answer 1 · edited May 23 '17 at 12:19

I use the following code for dealing with PhoneGap back events inside onDeviceReady:

    //handle back button
    document.addEventListener("backbutton", function(e) {
        if($.mobile.activePage.is('#main', 
             { transition: "fade", changeHash: false })){
              e.preventDefault();
            navigator.app.exitApp();
        } else {
            location.href='main.html';
        }
    }, false);

Replace backbutton with menubutton for the menu event. I've also added a JQuery fade transition to smooth out the process as user experience goes. This would also enable you to place the code into the onDeviceReady function, instead of calling it from somewhere else.

Tested with: jquery-1.8.2; jquery.mobile-1.2.0; phonegap-2.8.

Edit:

It seems that now your issue is that of onDeviceReady not triggering when on mobile device environment. I would suggest you try using a deferred object model, such as the one explained here: Correct way of using JQuery-Mobile/Phonegap together?

This could be an issue of both JQM and PG trying to race for initialization and causing conflicts. If it doesn't work, please provide details of how you are dealing with mobileinit

Thanks for your help. onDeviceReady is now resolved after I used braces with onDeviceReady() after reading that workaround in another post. However the back and menu buttons are still not working. I have modified your suggestion to make it as simple as this: document.addEventListener("backbutton", function(e) { e.preventDefault(); alert("Back Pressed"); }, false); and put this inside onDeviceReady() function. No I am not using mobileinit — AnR, Dec 18 '13 at 17:24

score 0 · Accepted Answer · answered Dec 19 '13 at 10:34

This is what ultimately made my day. And hopefully it should help others as well.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Project</title>
    <script src="js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">
        var dd = $.Deferred();
        var jqd = $.Deferred();
        $.when(dd, jqd).done(doInit);

    </script>


    <script src="js/MyOwn.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/cordova.js"></script>
    <script type="text/javascript" src="js/cordova-2.6.0.js"></script>

    <script type="text/javascript">

        $(document).bind('mobileinit', function () {
            jqd.resolve();
        });


        document.addEventListener('deviceready', deviceReady(), false);
        function deviceReady() {
            dd.resolve();
            document.addEventListener("menubutton", function(e) {
                  e.preventDefault();
                  MyCustomMenuFunction();
            }, false);

            document.addEventListener("backbutton", function(e) {
                  e.preventDefault();
                  MyCustomBackFunction();
            }, false);

            onDeviceReady();
        }

        function doInit() {
            onDeviceReady();
        }
    </script>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.min.css">

</head>

Two thing to be noted: - As I am new to this stuff, I was not adding cordova js earlier. After I added cordova-2.6.0.js then only menubutton started working. Whereas backbutton started working after I added cordova.js as well. - "deviceReady()" works but "deviceReady" doesn't. Don't know why.

Phonegap Android with JQuery - Unable to Capture / Program Back and Menu Keys

2 Answers2