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

StackOverflow https://stackoverflow.com/questions/20595163

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

Was it helpful?

Solution 2

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.

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top