Cordova backbutton Event Never Firing

I am overriding my device back button per the documentation that I attach event listener to backbutton with argument of false after the deviceready event.

I have done so like this:

// Smart App object
define([
    'routes',
    'cordova',
    'angular',
    'angularRoute',
    'angularResource',
    'angularTouch',
    'config',
    'controllers',
    'services',
    'directives',
    'helpers'
    ], function(appRoute) {
        var oApp = {
            _app: {},

            init: function() {
                console.log('init');
                document.addEventListener('deviceready', this.onDeviceReady, false);
            },

            onDeviceReady: function() {
                console.log('ok device ready');
                document.addEventListener('backbutton', function() {
                    console.error('deviceback start');
                    angular.element('.ng-scope').scope().back();
                    console.error('deviceback end');
                }, false);
                // ...
            }
        // ...

I have worked crazily to figure out why hitting the device button is not triggering this backbutton event i attached, i dont even see the console.error messages in the console. I am testing on Android right now I haven't tested on any of the other Phone OS'es yet.

The console.log('ok device ready') does fire and my app works properly, the device backbutton is overridden in that its default functionality is not taking place, however as stated, my function is not taking place either.

I read other stackoverflow topcis and they said the Cordova version landed a fix, but my Cordova version is much after theirs, my .cordova/config.json file tells me:

{
    "lib": {
        "www": {
            "id": "com.tigoenergy.smart",
            "version": "3.5.0"
        }
    }
}

It is 3.5 and then my info.txt tells me it is 5.0.0:

Node version: v0.10.25

Cordova version: 5.0.0

Config.xml file: 

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"

Does anyone have any ideas?

Answers:

Answer

Try using the normal way of using cordova events.

// device APIs are available
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
    //Add your back button implementation.
}

official documentation here

Modified code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Tigo SMART Installation</title>
<script type="text/javascript" src="apps/installation/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="apps/installation/js/index.js"></script>
<script type="text/javascript" src="apps/installation/js/fastclick.min.js"></script>
<script type="text/javascript" src="apps/installation/js/sha512.js"></script>
<script type="text/javascript" src="bower_components/uri.js/src/URI.min.js"></script>
<script type="text/javascript" src="js/extlogin.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="apps/installation/css/index.css" />

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
    //mycode
    console.log('ok loaded');
    document.addEventListener("deviceready", onDeviceReady, false);
});
// Wait for device API libraries to load
//
/*function onLoad() {
console.warn('ok loaded')
document.addEventListener("deviceready", onDeviceReady, false);
}
*/

// device APIs are available
//
function onDeviceReady() {
// Register the event listener
console.log('ok device ready');
document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
console.log('ok backey downed');
}

</script>
</head>
<body>

<div ng-view></div>
<script data-main="bin/SmartApp" src="bower_components/requirejs/require.min.js"></script>

<img style="opacity:0;visibility:hidden;" class="loader" src="img/loader.gif" />
</body>
</html>

Few reference links here and here

Answer

The issue was I was importing cordova.js in an iframe even though it was already in the parent window scope. I didn't know it would break it and thought I had to import cordova.js in the iframe. Removing the from the iframe fixed it.

Answer

Try This

    $(document).ready(function () {

        document.addEventListener("backbutton", onBackKeyDown, false);
    });
    function onBackKeyDown() {
        alert('ok backey downed');
    }

Make sure these files are link in your page

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.