Cordova application doesn't work if JavaScript is in separate file

Question

I want alert window to be shown on button click. I tried to run it in browser. Also I tried to do it without jQuery - the same problem. On my HTML I have just a button:

 <html>
<head>
    <title>Device Ready Example</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="js/index.js"></script>
    <button id="btn">BUTTON</button>
</head>
<body>
</body>
</html>

This is my JavaScript file (no error messages in Chrome's console):

function App() {
        var initialize = function () {
            onload();
        }

        onLoad = function () {
            document.addEventListener('deviceready', function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );
        }, false);
        }


        onDeviceReady = function () {
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("btn", onMenuKeyDown, false);
        }

        onPause = function () {
        }

        onResume = function () {
        }

        onMenukeyDown = function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );

        }
    };
    var app = new App;

Racil Hilan · Accepted Answer · 2017-11-01 02:47:27Z

3

You need to understand how PhoneGap apps work. They are not websites, so they don't behave like when you run them in your browser. PhoneGap apps run sandboxed in webview which shares a lot of features with web browsers, but has important differences. One important difference is security, which causes the issue that you're experiencing.

You are linking the jQuery library directly from the web. When you run the app on your phone, the webview will block that file, because for security reasons it blocks access to any external website. So you're getting your app with no jQuery.

You have to download the jQuery file into a local folder and changed the link accordingly.

Unrelated to your question, I also recommend loading cordova.js first (before jQuery or any other script).

answered Nov 1, 2017 at 2:47

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gergő Kajtár · Accepted Answer · 2017-10-28 15:24:04Z

0

The problem is with your index.js syntax. If you have a JavaScript object you need to instantiate like this:

 function App() {
        var initialize = function () {
            onload();
        }
        onLoad = function () {
            document.addEventListener("deviceready", onDeviceReady, false);
        }


        onDeviceReady = function () {
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("btn", onMenuKeyDown, false);
        }

        onPause = function () {
        }

        onResume = function () {
        }

        onMenukeyDown = function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );

        }
    };
    var app = new App;

The deviceready eventlistener only will work if you run your app on mobile device or you can add browser cordova platform to use this way.

But the answer for your question is, simply use jquery. index.html:

<html>
<head>
    <title>Device Ready Example</title>
    <button id="btn">BUTTON</button>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        document.addEventListener('deviceready', function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );
        }, false);
    </script>
</head>
<body>
</body>
</html>

edited Oct 28, 2017 at 15:24

answered Oct 28, 2017 at 14:30

Gergő Kajtár

4924 silver badges13 bronze badges

10 Comments

Andy D Over a year ago

I added var app = new App; before app.initialize(), still nothing on Android. Tried also without .initialize();

Gergő Kajtár Over a year ago

Are you get some errors in console? You can debug with Chrome.

Andy D Over a year ago

I'll try last code from edited answer, but for now I have Unexpected identifier on this line: function onLoad() {

Andy D Over a year ago

It tells that I have unexpected identifier on this line: onDeviceReady = function () {

Gergő Kajtár Over a year ago

I edited the last time :). Its works for me. You dont need onload="onLoad()"

|

Collectives™ on Stack Overflow

Cordova application doesn't work if JavaScript is in separate file

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related