jQuery $ not defined - Issues using window load - javascript

I'm getting a $ not defined error in the second case below, but not the first. jQuery is installed and working on the site.
Any code using $ in here runs fine:
jQuery(function($) {
alert("Yay!");
});
Anything inside of this errors with $ not a function:
jQuery(window).load(function($) {
alert("Why not!");
});

The error is because the load() event handler does not accept a jQuery object as an argument as document.ready (which is what your first example is shorthand for) does. In the second example your $ variable is actually a reference to the Event object, as such you're probably calling methods which don't exist.
If you want to use $ to reference jQuery, then it should be available by default. If for whatever reason it isn't, for example if you're using Wordpress, then you can use jQuery.noConflict() or an IIFE to re-alias it.
It's also worth noting that load() is deprecated. To hook to the window.load event use on():
jQuery(window).on('load', function() {
// your logic here...
});

Related

jQuery functions - re-invoking a self invoking function

I have a function that is I think is self invoked and I'm trying to figure out how to call it again.
This is how the function is declared:
jQuery(function setupFormInputHandlers(){
...
}
I try to put setupFormInputHandlers() in the developer tools console but I get an undefined error.
See jQuery document ready
// Passing a named function instead of an anonymous function.
function readyFn( jQuery ) {
// Code to run when the document is ready.
}
$( document ).ready( readyFn );
//invoke again
readyFn()
$ is just used as alias to jQuery so when you say $('x') you mean jQuery('x')..the main function is overloaded to make it familiar and to allow working with ease... also what you are asking about the function (may be you missed pasting other part)
$(function(){}); or
jQuery(function(){});
both are methods of calling anonymous function shorthand for
$(document).ready(function()
{
//your code
}
);`
in simple words it means "When the document loading complete register your an anonymous function"

Using $ instead of jQuery gives error

I'm using following jQuery code:
jQuery(document).ready(function() {
jQuery('#main').click(function(){
jQuery('#box').slideDown();
});
});
The above code works fine, however if I use $ instead of the jQuery, I get following error:
TypeError: $ is not a function
I understand that it is because of some conflict, but is there a way that I use $ in above code?
I have tried to use jQuery.noConflict(); also but it still gives same error.
Use this:-
jQuery(function($) {
$('#main').click(function(){
$('#box').slideDown();
});
});
Aliasing the jQuery Namespace
When using another JavaScript library, we may wish to call $.noConflict() to avoid namespace difficulties. When this function is called, the $ shortcut is no longer available, forcing us to write jQuery each time we would normally write $. However, the handler passed to the .ready() method can take an argument, which is passed the global jQuery object. This means we can rename the object within the context of our .ready() handler without affecting other code.
Reference
Try it like this,
$.noConflict();
jQuery(document).ready(function($) {
$('#main').click(function(){
$('#box').slideDown();
});
});
You could wrap it in a closure:
(function($){
// use $ as jQuery
})(jQuery);
You could use a closure:
(function ($) {
$(document).ready(function () {
$('#main').click(function () {
$('#box').slideDown();
});
});
})(jQuery)
First use noConflict.
var j = jQuery.noConflict();
then use
j(document).ready(function() {
j('#main').click(function(){
j('#box').slideDown();
});
});

Pass Jquery alias into javascript function

Im creating a theme for wordpress and I need to use some jQuery. Ive found bits of code online and ive made a few bits myself. However, when using jQuery provided by wordpress it is in noConflict mode and instead of using $ it is set to "jQuery". That is fine but I dont want to have to modify all my code and any code I find online to use "jQuery" instead of $.
So it tells me that by placeing function ($) at the end you are able to use the $ as the jQuery alias, but only in that functions scope. That is fine, but I was hoping that it would work and pass through to the functions I call from inside that scope. That is where my problem is. How can I make the jQuery code that uses $ inside my "resizeandcenter" function work.
jQuery('.artworklist > li > a > img').load(function ($){
resizeitems('artworklist');
});
This is my function that I want to be able to use the $ inside as I dont want to have to modify all my code / and any code I find online.
function resizeitems(elementname){
//Do some jquery stuff using $
}
Perhaps there is an alternative way to do what I am doing or I am doing it wrong?
EDIT:
My function "resizeitems" is on its own in a js file thats included in my page header.
The other code, the jQuery code in my first code block is at the bottom of the page in a script block.
So im a bit unsure about the answer saying to wrap my function?
You can wrap your entire code in a self executing closure (or an on ready/load closure) like this
(function ($) {
// do your stuff here
}(jQuery));
Then you can use $ within that closure
Here is an example on jsfiddle for you
window.addEventListener("load", function () {
(function ($jq) {
$jq("body").append($jq("<div>").text("hello"));
}(jQuery));
}, false);
Here is an example using jquery's ready event listener
jQuery(document).ready(function() {
(function ($jq) {
$jq("body").append($jq("<div>").text("hello"));
}(jQuery));
});
On jsfiddle
Or a further alternative in jquery, mostly syntax change, as suggested by #Mathletics
jQuery(function($jq) {
$jq("body").append($jq("<div>").text("hello"));
});
On jsfiddle
You need to pass jQuery into the top-level closure containing your code. Usually this is inside the $(document).ready() call. A basic example looks like this:
jQuery(function($) {
function resizeitems(elementname){
//Do some jquery stuff using $
}
$('.artworklist > li > a > img').load(function (){
resizeitems('artworklist');
});
});
jQuery is now aliased to $ inside of that closure.
All what matter is scope here. If your other functions are in some other scope you can just remap global jQuery to $ in that scope, so that you don't have to change the code.
var $ = jQuery;
You can even set it in global scope, but you may affect other usage of $ on the page if it was used for something else:
window.$ = jQuery;

start javascript code with $(function, etc

I am studying Backbone and the todo example apps from http://todomvc.com/
I have noticed there are 3 severals ways of starting the code in the files:
$(function() {
// code here
});
$(function( $ ) {
// code here
});
(function() {
// code here
}());
I do not understand the differences and when I should use one over the other.
I also saw some people using this to start their code:
$(document).ready(function(){
// code here
});
From what I have seen, this is the full way of writing it right?
In a more general way, should I always include my javascript code into something like that in each files?
Thanks for your advice.
$(document).ready(function(){}) ensures that your code runs on DOM ready, so that you have access to the DOM. You can read more about this in jQuery's documentation.
$(function(){}) is just an alias to #1. Any code in here will wait for DOM ready (see the docs).
$(function($){}) is equivalent to #1 and #2, only you get a clean reference to jQuery in the local scope (see the note below). You can likewise pass in $ to the function in #1, and it'll do the same thing (create a local reference to jQuery).
(function(){}()) is just a self-executing-anonymous-function, used to create a new closure.
Please note that none of these are specific to Backbone. The first 3 are specific to jQuery, while #4 is just vanilla JavaScript.
Note: To understand what's going on in #3 above, remember that $ is an alias to jQuery. However, jQuery is not the only library that uses the $ variable. Since the $ might be overwritten by someone else, you want to ensure that within your scope, $ will always reference jQuery - hence the $ argument.
In the end, it basically boils down to the following 2 options:
If your JavaScript is loaded in the head, you have to wait for document ready, so use this:
jQuery(function($) {
// Your code goes here.
// Use the $ in peace...
});
If you load your JavaScript at the bottom of your document (before the closing body tag - which you should definitely be doing), then there's no need to wait for document ready (since the DOM is already constructed by the time the parser gets to your script), and a SEAF (A.K.A. IIFE) will suffice:
(function($) {
// Use the $ in peace...
}(jQuery));
P.S. For a good understanding of Closures and Scope, see JS101: A Brief Lesson on Scope.
I guess it makes sense to start out, by realizing that $ = jQuery. The purpose of which down below when reading about namespaces within anonymous functions will make more sense. But in essence, you can use either of them. One would use jQuery() instead of $() if they were using multiple libraries, and wanted the $ to be used by the other one.
$(document).ready(function(){
// Here we have jQuery(document) firing off the ready event
// which executes once the DOM has been created in
// order to ensure that elements you are trying to manipulate exist.
});
​$(function () {
// Short-hand version of $(document).ready(function () { });
});
More information on Document.ready()
Putting the $ within the parenthesis ensures the jQuery $ alias (you can be safe it always signifies jQuery this way).
$(function ($) { /* code here : $ always means jQuery now */ });
Lastly you have an IIFE (Immidiately-Invoked Function Expression)
- IIFE explanation
(function (myNameSpace, $) {
// This is an anonymous function - it is ran instantly
// Usually used for namespaces / etc
// This creates a scope/wrapper/closure around everything inside of it
}(window.myNameSpace, jQuery));
The $ at the top (with it's matching jQuery on the bottom) signify that the
$ (dollar sign) stands for jQuery within the scope of the namepsace.
This is done to ensure that other libraries do not collide with what the developer
intends/wants the $ to be used with.
(function (myNameSpace, $) {
// Now because of all of this scope/wrapper/closure awesome...
// you can create -INTERNAL- variables (sort of like Private variables from other langs)
// this variable cannot be accessed outside the namespace unless it is returned / exposed
var internalVariable = '123'; // Internal
// Even Internal functions!
function privateFunction () {
console.log('this is private!');
}
// --------------------------------------------------------
// Public -method- of nameSpace exposing a private variable
// Notice we're using the myNameSpace object we exposed at the top/bottom
myNameSpace.nameSpaceMethod = function () {
privateFunction(); // we can call the private function only inside of the namespace
return internalVariable; // now we could get this variable
};
}(window.myNameSpace, jQuery)); // notice these mirror the above arguments in the anon function
More information on anonymous functions
Now if we're outside of the namespace, we can see how these internal/public methods and variables are effected:
// This will come up undefined
alert(internalVariable);
// This will trigger a -method- of the myNameSpace namespace - and alert "123"
// Showcasing how we access a Public method - which itself has access to the internal variable
// and exposes it to us!
alert(myNameSpace.nameSpaceMethod());
​
These two:
$(function() {
// code here
});
$(document).ready(function(){
// code here
});
Are directly equivalent, they are both the way to start some jQuery when the document has loaded. The former is just a shorter version of the latter.
This one:
(function() {
// code here
}());
is just a scoped function with zero parameters, which is immediately called with zero parameters.

Window load wrapper for jQuery

jQuery(document).ready(function($){}); is a known and great way to protect the $ from causing errors.
What I'm curious about is if jQuery(window).load(function($){}); would work in the same way?
Basically, what I have now is:
jQuery(document).ready(function($){
$(window).load(function(){
// ...
});
});
This just seems unnecessary to me, any ideas about simplifying this? I need the safety of having jQuery properly mapped to $ (or whatever the correct term is) but the same timing as window.load()
I prefer this...
(function($){
$(window).load(function(){
//everything is loaded (images, scripts, etc.)
});
// and/or
$(document).ready(function(){
// the dom is in place, but everything is not necessarily loaded
});
})(jQuery);
Note: This will only work if jQuery was included before this script. I have never encountered any problems with jQuery being undefined this way. Furthermore, you will never have problems with $ being undefined, because you are passing it into your anonymous function.
You can do this:
(function($) {
$(window).load(function(){
// ...
});
})(jQuery);
The anonymous function will be executed immediately rather than waiting for DOM ready as in the code in the question. Within the function $ will be a reference to jQuery so won't clash with any other $ defined outside the anonymous function.
You can create a local parameter:
(function($) {
$(...)
})(jQuery);
This code executes an anonymous function with a parameter named $, passing jQuery as the parameter value.

Categories

Resources