CODEWITHSUNDEEP
jquerycordovajquery-mobile
Propeller
Propeller

Reputation: 2533

How to detect back and menu button on Android? PhoneGap + jQuery Mobile

I'm on jQuery Mobile v1.2.0 and PhoneGap v2.2.0. None of the PhoneGap events seem to be firing however I call it (be it via document.addEventListener or $(document).on. The back button and menu button detection just doesn't work.

There are other questions like this but so far all I can see are suggestions to either use document.addEventListener or use the jQuery approach for adding event listeners but it really doesn't work. Can anybody give me a sure-fire way to detect them?

Here's the <head> of my index.html

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="jqm/jquery.mobile.theme-1.2.0.css" />
    <script src="js/jquery.js"></script>
    <script src="jqm/jquery.mobile-1.2.0.js"></script>
    <script src="js/cordova.js"></script>
    <script type="text/javascript">
        $(document).live("pagechange",function(){
            var page = $.mobile.activePage.attr("id");

            document.addEventListener("menubutton", menuKeyDown, true);
            function menuKeyDown() {
                alert('Menu button pressed.');
            }
        });
    </script>
</head>

Upvotes: 4

Views: 7831

Answers (1)

Palani Kumar
Palani Kumar

Reputation: 1137

Delete "cordova.js" in project, before uploading to build.phonegap.com. And try this below code.

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/>
<link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="jqm/jquery.mobile.theme-1.2.0.css"/>
<script src="js/jquery.js"></script>
<script src="jqm/jquery.mobile-1.2.0.js"></script>
<script src="js/cordova.js"></script>
<script type="text/javascript">
        $(document).live("pagechange",function(){
            var page = $.mobile.activePage.attr("id");
        });
        document.addEventListener("deviceready", function () {
            document.addEventListener("menubutton", menuKeyDown, true);
        }, false);
        function menuKeyDown() {
                alert('Menu button pressed.');
            }
    </script>
</head>

Upvotes: 6

Related Questions