Phonegap ignoring empty global object

Question

I have a single html page phonegap app I'm testing. It works perfectly in my browser but when I test it on my phone through PhoneGap CLI it falls over entirely. I have it set up with Weinre but it doesn't show errors in the console like a browser does. Anyway. I've narrowed it down to the fact that a global empty object I define at the beginning of the js is being treated as undefined, so when I try to add to it the code simply refuses to start the loop. In the Chrome log is is correctly defined as an object and works perfectly.

Here is my code:

var holding_layers_info = {};

function my_function() {
    console.log(typeof holding_layers_info); // this logs undefined on PhoneGap App and object on Chrome log
    // my loop here, adding values to holding_layers_info, which doesn't run because of the undefined object above
}

I am entirely baffled by this, can't find anything similar online and have no idea where to start fixing it. Defining the empty object with var holding_layers_info = new Object(); or simply leaving it as var holding_layers_info; doesn't make any difference either, not that I thought it would.

An empty object defined within a function works as expected, but I need this to be global.

EDIT: Here is an abridged version of my index.html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" /> -->
        <!-- Good default declaration:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
            * Enable eval(): add 'unsafe-eval' to default-src
            * Create your own at http://cspisawesome.com
        -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

        <link rel="stylesheet" type="text/css" href="css/ol.css">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/fonts.css" />
        <link rel="stylesheet" type="text/css" href="css/easy-autocomplete.css" />
        <title>La la la</title>
    </head>
    <body>
        <!-- Boring HTML-only page content here -->

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>
        <script type="text/javascript" src="js/ol.js"></script>
        <script type="text/javascript" src="js/general.js"></script>
        <script type="text/javascript" src="js/jquery.easy-autocomplete.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Answer 1

On the very first JS script I load, I make sure I have this function on top for debugging purposes:

//debugging
var debug = true;
if (debug) {
  window.onerror = function (msg, url, linenumber) {
    alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
    return true;
  };
}

This basically alerts every error that would usually come from the console. If this gives you an error, I think it would be very helpful!

With the information we have now, I'm quite sure nobody can actually answer your question. It's just too vague. Come back to me =)

I'm just going to throw this out there, because you never know: Did you maybe forget to remove the onDeviceReady functionality from the index.js that comes with the template of Phonegap?

Talking about this part:

onDeviceReady: function() {
    app.receivedEvent('deviceready');  //You should place YOUR starting function here!
},    
receivedEvent: function(id) {
  var parentElement = document.getElementById(id);
  app.receivedEvent('deviceready');
  var receivedElement = parentElement.querySelector('.received');//Quite sure you removed this element from the DOM :)

  listeningElement.setAttribute('style', 'display:none;');
  receivedElement.setAttribute('style', 'display:block;');

  console.log('Received Event: ' + id);
}

You see, this part is selecting DOM elements which you have probably removed. I have noticed on my projects that chrome doesn't kill off your JS anymore when you trigger something on non-existing elements.

Calling your own (Starting) function from there, would go somewhat like this:

onDeviceReady: function() {
   MyInitFunction();
}

-- you can remove the rest. (the entire receivedEvent: function)

On a small sidenote, I now see you are using jQuery 1.x. Since you're creating a mobile app, you really don't have to worry about backwards compatibility for older browsers. I'm currently using 2.x, but I think there would be no harm into switching to the new (much faster) 3.x

Phonegap ignoring empty global object

Question

1 answers

solution1
1 2016-09-09 23:26:34

Phonegap ignoring empty global object

Question

1 answers

solution1 1 2016-09-09 23:26:34

solution1
1 2016-09-09 23:26:34