"$" Undefined when using jQuery in Visual Studio - javascript

I am trying to learn how to get JSON data using jQuery (using Visual Studio) but am hitting a runtime error in VS.
Error message: JavaScript runtime error: '$' is undefined
It seems that VS is just not recognizing jQuery. Alternatively, I have tried referencing the external jQuery library via their CDN but it did not resolve it.
Anyone have an idea why I am running into the error?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.10.2.min"></script>
<script src="/js/default.js"></script>
</head>
<body>
<button onclick="canWeGetData()">Get Data!</button>
</body>
</html>
Default.JS:
function canWeGetData() {
var error = "Null data!";
var success = "Good data!";
$.getJSON("http://ip.jsontest.com/?callback=showMyIP", function (data) {
if (data == null) {
document.writeln(error);
}
else {
document.writeln(success);
}
});
};

Jquery isn't present.
Look at this line:
<script src="/js/jquery-1.10.2.min.js"></script> <!-- you missed the .js -->
Also, Check whether the path is correct. Or simply use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

doubt jquery is not present
try
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

Related

Q-Unit Global Failure

I have just attempted to set up Q-Unit Testing, for my javascript functions. However, I seem to be getting an error of Global Failure
Within my JS file : script.js, I have to have the test code above all of my JS code, else the unit tests do not run and I only get the global failure message. However, if I paste the unit tests above all of the JS functions, the tests do then run but I still get the global failure error.
Can someone guide in the right direction.
test-script.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q-Unit Tests</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.10.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.10.0.js" integrity="sha256-X1fQXHSYGxa4V2bqkEAQW0DQGSxJrKveasahr959o28=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
function square(x) {
return x * x;
}
QUnit.test( "square", function( assert ) {
var result = square(2);
assert.equal( result, "4", "square(2) should be 4." );
});
//Normal JS functions are below here
I'm posting the answer to this one as I think by including the CDN link for jQuery that has solved the global failure error, as it is no longer appearing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Loaded jQuery UI library but getting "Uncaught TypeError: $(...).effect is not a function"

Trying to make the #intro_title bounce when the document is ready. I loaded both the jQuery and jQuery UI libraries and I still get "Uncaught TypeError: $(...).effect is not a function". I suspect that this is an issue with importing the jQuery UI library so...
I tried loading the libraries at the end of the body, head, html, etc. and changed "src" to "href" but I get the same result each time. I even tried both Google's and jQuery's hosted libraries only to meet the same result.
lodge_101.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lodge_101_main.css">
<head>
<title>Scipio Lodge 101</title>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1 id="intro_title">WELCOME TO LODGE 101</h1>
<script src="lodge_101_main.js"></script>
</body>
</html>
lodge_101_main.js
$(document).ready(function() {
$("#intro_title").effect("bounce", { times:3 }, "slow");
});
Why does this continue to happen and how can I fix it? I'm still new to programming so please be very critical of my work, thank you!
you have to load the jquery library before the jquery ui. just change your script tags position. move the jquery script tag at the first position.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Try defining jquery before jquery-ui.

jQuery.validationEngine reference error?

Everything seems to be referenced correctly however I can't get it to work properly. Strangely it worked once but took 10 seconds before the validation message popped up, didn't change anything and tried again but stop working. The only warning i have is event.returnValue is deprecated. Please use the standard event.preventDefault() instead. in the jQuery library.
<html>
<head>
<link rel="stylesheet" href="jQuery-Validation-Engine-master/css/validationEngine.jquery.css" type="text/css"/>
</head>
<body>
<form id="formID">
<input class="validate[required]" type="text" id="agree" name="agree"/>
</form>
<script src='js/jquery-1.10.2.min.js'></script>
<script src="jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuery-Validation-Engine-master/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#formID").validationEngine();
});
</script>
</body>
If there is nothing wrong with the above then it may be something else in my project interfering, but any help would be appreciated.
What is happening, probably, is at the time jQuery is loaded your plugin(s) aren't yet loaded so when you call the validationEngine() method, it's not yet defined. I recommend loading your scripts synchronously with Modernizr and call that method once both scripts have loaded.
If you stick with the Modernizr way all you need to do is include your minimized version of Modernizr in the head and call your scripts like below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Your Document</title>
<!--
following script loads first. nevermind the version, I copied it from a script of mine
-->
<script type="text/javascript" src="js/modernizr.2.6.2.min.js"></script>
</head>
<body>
<form id="formID">
<!-- etc -->
</form>
<script type="text/javascript">
Modernizr.load([
{
// following loads next
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
complete: function() {
if (!window.jQuery) Modernizr.load('js/jquery-1.10.2.min.js');
// this is your local copy of jQuery, in case you might need a fallback
}
},{
// finally the remaining scripts load
load:[
'jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-en.js',
'jQuery-Validation-Engine-master/js/jquery.validationEngine.js'
],
complete: function() {
// all is loaded. do what you want here.
$("#formID").validationEngine();
}
}]);
</script>
</body>
</html>
In my case as I mentioned above updating to jQuery lib 1.11.0 rid the warning for me. (latest chrome)
Here is how I ended up using the validationEngine if interested:
<form id="formID" />
<button type="submit" value="Save" id="Save" onclick="clicked(event);">Submit Survey</button>
function clicked (e)
{
if (confirm('Are you sure you want to submit?'))
{
if ($("#formID").validationEngine('validate'))
{
my.LocalStorage.save();
}
}
e.preventDefault();
}

jquery.printElement not responding at all

I've been trying to use the jquery.printElement plugin but nothing happens when I click on the Print link, except for this error message in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined
The code I'm using is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Print</title>
</head>
<body>
<p id="content">Some text to print</p>
Print
<script src="../common/js/jquery-1.10.1.min.js"></script>
<script src="../common/js/jquery.printElement.js"></script>
<script>
$('#printIt').click(function() {
$('#content').printElement();
});
</script>
</body>
</html>
Anyone know why this is happening?
The printElement plugin uses jQuery.browser internally, and $.browser has been deprecated and removed in the version of jQuery you're using.
You have to use an older version of jQuery, or possibly the migrate plugin to make printElement work.
wrap code inside document.ready.
$(function()
{
$('#printIt').click(function()
{
$('#content').printElement();
});
});

Uncaught reference error: quickread is not defined

I get an UncaughtReferenceError: QuickRead is not defined on line 10 which is QuickRead.applyToLinks();
I am using the script from here http://www.readshout.com/quickread and I believed I followed all the directions it has to use it, yet its not working.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="http://www.readshout.com/bookmarklets/quickread/quickread.js"></script>
<script>
//QuickRead.setFilter('a.my_links');
QuickRead.applyToLinks();
</script>
Give up on google<br />
ycomb exp
</body>
</html>
Works for me. You could however try to add jQuery 1.4.2 manually, as QuickRead seems to dynamically load it. Otherwise try Firebug to find the error.

Categories

Resources