Whether you are using jQuery by itself or with Bootstrap there are a few things to remember if you don’t want to see the following error: “Uncaught ReferenceError: $ is not defined”. This error happens because you are trying to access jQuery before the library has finished loading. There are several ways to fix the error.
Encapsulate jQuery functionality inside a function. This keeps the parser from attempting to execute any jQuery until the function is explicitly called and it allows us to place the script tag at the bottom of the app. This approach can get tricky if jQuery is slow to load. It’s possible that the button can be visible and clickable before jQuery has finished loading. If this happens your app will throw an error. You can try it out in jsfiddle here.
<!DOCTYPE html>
<head lang="en">
<title>jQuery Test</title>
</head>
<body>
<button id="button1">Click me</button>
<div id="div1" style="background:blue;height:100px;width:100px;position:absolute;"></div>
<script>
// Test if jQuery is available
if(typeof jQuery !== 'undefined'){
console.log("jQuery has been loaded");
}
else{
console.log("jQuery has not been loaded");
}
document.getElementById("button1").onclick = function(){
$( "#div1" ).animate({
left: "250px",
height:'150px',
width:'150px'
});
};
</script>
<!-- Everything above this will load first! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</body>
</html>
Use the script tag onload event to initialize jQuery functionality. This follows the guidelines of the first suggestion above and then waits to fire off any functionality until after the jQuery library has completed loading. This insures jQuery is loaded before it can be used. You can try it out in jsfiddle here.
<!DOCTYPE html>
<head lang="en">
<title>jQuery Test</title>
</head>
<body>
<div id="div1" style="background:blue;height:100px;width:100px;position:absolute;"></div>
<script>
// Test if jQuery is available
if(typeof jQuery !== 'undefined'){
console.log("jQuery has been loaded");
}
else{
console.log("jQuery has not been loaded");
}
// Run this function as soon as jQuery loads
function ready(){
$( "#div1" ).animate({
left: "250px",
height:'150px',
width:'150px'
});
}
</script>
<!-- Everything above this will load first! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" onload="ready()" ></script>
</body>
</html>
Place script tag in head. Sometimes lifecycle issues in mobile web apps will require us to simply load jQuery from the head of the web app. Because this forces jQuery to load synchronously before any user interface elements we pretty much guarantee that jQuery will be available when we run JavaScript within the body of the application. Try it out in jsfiddle here.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery Test</title>
<!-- Block DOM loading until jQuery is loaded -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="button1">Click me</button>
<script>
// Test if jQuery is available
if(typeof jQuery !== 'undefined'){
console.log("jQuery has been loaded");
}
else{
console.log("jQuery has not been loaded");
}
// Page is fully loaded including any graphics
$(window).load(function() {
console.log("window.load worked!");
});
// According to jQuery docs this is equivalent
// to the generic anonymous function below
$(document).ready(function() {
console.log("document.ready worked!");
});
// The DOM has been loaded and can be accessed
$(function() {
console.log("DOM loaded worked!");
});
$( "#button1" ).click(function() {
alert( "Handler for .click() called." );
});
</script>
</body>
</html>