Cordova backbutton Event Never Firing

Question

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?

Are you able to get console.logs of device ready and deviceback started.? — Deep Mehta, Jul 10 '15 at 22:09
thanks @DeepMehta device ready does show in console. the deviceback started or finished dont show :( — yatg, Jul 10 '15 at 22:34
try implementing the usual way. normally it should work. i dont see why your code is not working.. — Deep Mehta, Jul 10 '15 at 22:36
@DeepMehta by any chance would you be able to work a bit more with me on this I cant figure it out >_ — yatg, Jul 13 '15 at 17:23
Found the culprit @DeepMehta ! Its line 3 https://gist.github.com/yajd/7b3243f1d6971202b46e#file-errr-js-L3 Im trying to learn angular here, in the docs what page would i look up? Im not sure what `cordova` did on this line when doing `define('app', [], function(){});` Im fairly new to angular would you know by chance? Or should i make a topic tagged angular? — yatg, Jul 13 '15 at 20:59
Found the problem @DeepMehta! 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. — yatg, Jul 14 '15 at 17:13

score 1 · Accepted Answer · edited May 23 '17 at 11:44

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

Thanks Deep I tried it this way I copied pasted: https://gist.github.com/yajd/d4836a73dc917f842dbe the load and device ready fire but when i hit back nothing happens :( — yatg, Jul 10 '15 at 22:39
I usually import jquery first. so change the order of your imports Jquery then cordova. also you are missing ; after console.warn() in onLoad function — Deep Mehta, Jul 10 '15 at 22:45
Thanks so much @Deep for this help I have been utterly confused on this, I tested it with this, cordova loaded last but it still didnt work :( https://gist.github.com/yajd/d4836a73dc917f842dbe/a27b2750a7eab9be9c163614b44c25045a3799eb — yatg, Jul 10 '15 at 22:47
Thanks so much Deep for your continued help, I copeid pasted this, it said `onLoad` is not defined but i dont think this hurt it, as `ok loaded` and `ok device ready` got logged. But when i hit back button it doesnt do anything :( — yatg, Jul 10 '15 at 23:06
yea that onload i forget it remove from body. on which phone are you testing it? try showing alerts other then console log — Deep Mehta, Jul 10 '15 at 23:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/83005/discussion-between-deep-mehta-and-yatg). — Deep Mehta, Jul 10 '15 at 23:08

score 1 · Answer 2 · answered Jul 14 '15 at 17:16

1

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.

answered Jul 14 '15 at 17:16

yatg

1,121
1
9
15

score 0 · Answer 3 · answered Aug 18 '17 at 09:54

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>

Cordova backbutton Event Never Firing

3 Answers3

Linked

Related