Uncaught ReferenceError: $ is not defined how to solve?

Question

I have a problem in a click button redirect to another page in cordova build, the error is an Uncaught ReferenceError: $ is not defined

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener('resume', onResume.bind(this), false);
        $("getas").click(function () {
            alert("The paragraph was clicked.");
        });
      
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
} )();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <title>CatechesisMobileApp</title>

    <!-- MobileApp references -->
    <link href="css/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>

</head>
<body>
    <p>Mobile App - Inicio</p>

    <button id="getas">Ver Alunos (GET ALL)</button>
    <br />
    <br />
    <button id="geta">Ver Aluno (GET ID)</button>
    <br />
    <br />
    <button id="posta">Inserir Aluno (POST)</button>
    
    <!-- Cordova reference, this is added to your app when it's built. -->
   
</body>
</html>

what am i doing wrong? I already try in onclick button "document.location.href='example.html'" and simply dont work

Thanks

Please don't load resources such as JQuery JS and CSS remotely in your Cordova app - move them locally to say your scripts folder. The app will be sluggish and not work in an offline situation if you rely on remote boilerplate JS for frameworks. How are you getting to the other page? Are you loading it remotely? Ideally your app should be a single page, with all its page templates locally built into the app and should use an API to get data from a server and not rely on remote HTML documents. — Simon Prickett, Nov 24 '15 at 19:23
I put this references locally now but didnt solve the problem, same error referencing to the line **$("getas").click(function () {** uncaught error at **$** And now its fail loading the resources with error **Failed to load resource: the server responded with a status of 404 (Not Found)** — Joni Correia, Nov 24 '15 at 19:29
That means you still didn't point it to the right path. Double check your path. Try both relative and absolute paths to the file. — Ayush Gupta, Nov 24 '15 at 19:37
Does this help? `(function () { ... } )(jQuery);` i think i have seen this before where using this `(function () {} )();` keeps everything local? — P Clegg, Nov 24 '15 at 19:41

score 2 · Answer 1 · edited May 23 '17 at 11:51

Philip Clegg was very close in his comment. You need to pass jQuery into the closure. Here's an SO question explaining it

(function ($) {
"use strict";

document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

function onDeviceReady() {
    // Handle the Cordova pause and resume events
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener('resume', onResume.bind(this), false);
    $("#getas").click(function () {
        alert("The paragraph was clicked.");
    });


    // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
};

function onPause() {
    // TODO: This application has been suspended. Save application state here.
};

function onResume() {
    // TODO: This application has been reactivated. Restore application state here.
};
} )(jQuery);

score 1 · Answer 2 · answered Nov 24 '15 at 19:23

1

getas is an id so you should select it with

$("#getas")

answered Nov 24 '15 at 19:23

Billy

154
5

2

While this is correct, it doesn't answer the question. – Felix Kling Nov 24 '15 at 19:28
Why was this upvoted? Yes, it points out a mistake, but it doesn't solve the problem the question is about. Either this answer should be extended to cover everything or it should be a comment. It certainly doesn't deserve two upvotes. – Felix Kling Nov 25 '15 at 04:42

Uncaught ReferenceError: $ is not defined how to solve?

2 Answers2