CODEWITHSUNDEEP
javascriptjquery
Joni Correia
Joni Correia

Reputation: 31

Uncaught ReferenceError: $ is not defined how to solve?

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

Upvotes: 3

Views: 2116

Answers (2)

spaniol6
spaniol6

Reputation: 606

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

Upvotes: 2

Billy
Billy

Reputation: 154

getas is an id so you should select it with

$("#getas")

Upvotes: 1

Related Questions