CODEWITHSUNDEEP
javascriptjquerycordovavisual-studio-2015
Anthony Bandoly
Anthony Bandoly

Reputation: 135

Can't get jQuery to work in index.js in Blank Cordova App in Visual Studio 2015

I am using Visual Studio 2015 to create a blank Apache Cordova App as shown in this link: https://i.sstatic.net/mm44U.png

Using the NuGet Package Manager, I've added jQuery to my project: https://i.sstatic.net/RH7co.png

From my basic understanding, adding jQuery through the NuGet Manager doesn't add a script tag to my index.html (or index.js) but instead get's packaged up in the Cordova.js file.

I've added the following basic link tag in my index.html <a href="#" id="mylink">Link</a>

However, if I try to reference that anchor tag using jQuery in my index.js file, I get the following error: Uncaught ReferenceError: $ is not defined

However, in the debug window, in the javascript console, I can use jQuery just fine to access elements. I am missing something basic here. Can someone explain why my jQuery is failing?

Here are my index.html and index.js files:

index.html: 

<!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>Office365Test3</title>

<!-- Office365Test3 references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Test 3</p>
    <br />
    <a href="#" id="mylink">Link</a>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

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

index.js

/// <reference path="../../Scripts/jquery-2.1.4.min.js" />
/// <reference path="../../Scripts/jquery-2.1.4.min.js" />
// 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 );

    // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    $('#mylink').css('display', 'none');




};



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

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

Upvotes: 2

Views: 2342

Answers (1)

Michael McMullin
Michael McMullin

Reputation: 1470

Try moving your jQuery files into the www/scripts directory, and reference them from your index.html file. By default, NuGet places them in the Scripts folder in the project root, which doesn't seem to be accessible.

Upvotes: 2

Related Questions