CODEWITHSUNDEEP
javascriptjquerycordovaphonegap
Andy D
Andy D

Reputation: 125

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

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;

Upvotes: 1

Views: 848

Answers (2)

Racil Hilan
Racil Hilan

Reputation: 25341

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).

Upvotes: 3

Gergő Kajt&#225;r
Gergő Kajt&#225;r

Reputation: 492

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>

Upvotes: 0

Related Questions