Why is $ undefined when jQuery is loaded? - javascript

I have this in the head of a page:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
$("#ListBoxSegment").change(function () {
GetAccountOpportunityTypes($(this).val());
});
$("#ListBoxType").change(function () {
GetNumberOfContacts();
});
});
Running the page gives this error:
0x800a1391 - Microsoft JScript runtime error: '$' is undefined
Why is $ undefined when jQuery is loaded in the line above?
IT WAS FIXED BY LOADING FROM THE URL:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
But still a little strange that it wouldn't load from local.

The problem is likely that jQuery isn't being loaded. Check the network tab of your browser tools to see if there is a 404 or something on the jQuery JavaScript file. Otherwise, this wouldn't happen.
Also, consider loading jQuery from a CDN to take advantage of caching that occurs from site to site:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

I was using IE, and i had the same issue.For me it was fixed when i cleared the cache and cookies in the browser options.

Related

jquery 3 ready function does not work correctly

Good afternoon!
I moved from jquery 1.11.1 to jquery 3.3.1. I have the following code on the page:
...
<script type="text/javascript">
function onJqueryLoad() {
$(function () {
console.log(document.readyState);
window.app = new App({logsUrl: '3434'});
});
}
</script>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js" defer onload="onJqueryLoad()"></script>
...
// more scripts
...
<script type="text/javascript" src="~/Scripts/Common/App.js" defer></script>
...
In the console I see the following error:
interactive
jquery-3.3.1.js:3818 jQuery.Deferred exception: App is not defined
ReferenceError: App is not defined
at HTMLDocument. (http://localhost:53228/:12:35)
at mightThrow (http://localhost:53228/Scripts/jquery-3.3.1.js:3534:29)
at process (http://localhost:53228/Scripts/jquery-3.3.1.js:3602:12) undefined
Uncaught ReferenceError: App is not defined
at HTMLDocument. ((index):12)
at mightThrow (jquery-3.3.1.js:3534)
at process (jquery-3.3.1.js:3602)
It turns out that the contents of $ (function () { were called before the App.js script was loaded, and the status of document.readyState was “interactive”.
But if you do not use “defer” when importing jquery:
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js" onload="onJqueryLoad()"></script>
then the console will have the status: “complete” and no problems will arise.
Description of the status document.readyState interactive (https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState):
The document has finished loading and the document has been parsed,
but sub-resources such as images, stylesheets and frames are still
loading.
I failed to find more detailed information on whether the status “interactive” indicates that all scripts are loaded.
I checked it in the latest versions of chrome and firefox, but in Microsoft Edge no problem.
In the earlier version of jquery 1.11.1, there were no such errors.
https://jsfiddle.net/uez1y7ft/4/ - if using without cash, the error appears from time to time(ctrl+f5 - see the console).
Any thoughts?
Yes, it's problem of jquery. You need use document.AddEventListener("DOMContentLoaded", function() {...}); or fix jquery library. You can see discussion about this problem here: https://github.com/jquery/jquery/issues/3271
Try this.
I've reordered the scripts, removed the defer and onload attributes, and have added a line to call onJqueryLoad when jQuery has finished initialising.
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript" src="~/Scripts/Common/App.js"></script>
<script data-worldcore>
function onJqueryLoad() {
console.log(document.readyState);
window.app = new App({logsUrl: '3434'});
}
$(function(){ onJqueryLoad(); } );
</script>

jQuery not working in html file (JS LINT errors such as '$' was used before it was defined)

I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
This is what is in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
My code editor is throwing errors when I save this js file because of errors like:
-'$' was used before it was defined.
-Expected exactly one space between 'fucntion and '('
Anyone know what the issue might be? Thanks in advance.
This might not be the issue, but you may wish to attempt to load the jquery file by HTTPS (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js), especially if you are running your site on an HTTPS connection.
Otherwise, it seems to work when I test it:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
console.log("done!")
});
</script>
The problem is in your <script> tag, as #B.Fleming said maybe the HTTPS protocol. This tag is working:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
put this in top of your code where you are using jQuery
/* global $ */
alternativ is prefixing it with window
I don't like using the global $ sign cuz other libs are using it as well. what i usably dose is getting the $ from the closure function like this
jQuery(function($){
// document is ready, You may use jquery here and now
$('body')
})
and to get away with jQuery is not defined use window.jQuery instead
ps, always load stuff from https when possible

Error in Success callbackId: GeolocationXXXX : ReferenceError: Can't find variable: $ [duplicate]

I am using jQuery. This is my coding on my main page:
<script type="text/javascript" src="script.js">
</script>
and my script.js is:
$(document).ready(function(){
$("#title").click(function () {
alert("Works!");
});
});
My full coding can be found here: http://pastie.org/8676656.
Using a tool on the browser, I found an error in my javascript code:
ReferenceError: Can't find variable: $
on line:
$(document).ready(function() {
Any help would be appreciated.
You have to import jQuery before using it:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Notice it is using // as protocol (not http:// or https://), it means: if your .html file is at a http:// server, it will get jQuery from http://ajax.google..., and if it is at a https:// server, it will get it from https://ajax.google....
Note: If, while developing, you open your HTML file in your browser instead of in a server, you should specify the protocol, as in this answer, otherwise it won't work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Also, you should, if possible, place your .js files at the bottom of the page, right before closing </body>. See more in here.
Import jQuery before your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"><script>
Include jQuery before your script
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script>
this is jquery load problem,
load jquery before all your code and script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" ></script>

JQuery does not work: uncaught type error

I have placed the following JQuery script in my HTML site header just to test if it works:
//in the header
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
$("#navbar").hide();
});
navbar does not hide and I get the error (in Chrome Developer Tools):
Uncaught TypeError: Object # has no method 'ready'
Have I placed the script in the wrong place? I use Joomla for my site btw.
Site: europebathroom.com
Thanks in advance!
Include Jquery Library in head section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#navbar").hide();
});
</script>
Seems like you havent include jquery in your code. Include the jquery, either by refering online or save it as local.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
$("#navbar").hide();
});
Add this below script. before your script as you need to add jquery script before it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">

prettyPhoto Not Working - Error: Not a Function

I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.

Categories

Resources