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();
});
});
Related
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...
});
I've found this function and I'm not sure about what's doing
(function($) {
$(document).ready(function() {
/
$('.auto-scroll').off('click').on('click', function(event) {
event.preventDefault();
....
....
});
$("#btnBuscar").on("click", function() {
...
...
});
});
})(jQuery);
What is the meaning of pass JQuery as a parameter?
What is the meaning of pass JQuery as a parameter?
It's passing jQuery as an argument, and receiving it as the $ parameter. That way, within the anonymous function, it can use $ when using jQuery, rather than having to use jQuery. This is useful when you can't be sure that the global $ is already equal to jQuery (which it may not be, if a page has used noConflict to release it).
jQuery(document).ready(function($) {
$('#customdivid').prepend($('<div class="myclass"></div>'));
})(jQuery);
I'm using Wordpress, and I understand that it runs in no conflict mode, but I thought if I wrote a function out as above I would be able to use $ instead of jQuery.
Script runs fine when I just use jQuery, but I want to understand what I'm doing wrong.
Thanks
Update: I guess what I'm really asking is how can I create this in a js file. jQuery = $
Would I just do var $ = jQuery
I read somewhere that I can include $ in the () after function and end the function with jQuery and all would be fine, hence my example above.
Hope I'm making sense
Thanks again!
You're confusing two different things. An IIFE (Immediately Invoked Function Expression):
(function($){
// $ is jQuery
}(jQuery));
With a ready event:
jQuery(document).ready(function($){
// now you can use $
});
If you simply pass a function to jQuery it's the same as the ready event:
jQuery(function($){
// use $
});
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;
I would like to ask on how I can use both functions once the page loads
jQuery(document).ready(function($)
{
$('#list').tableScroll({height:500});
});
and
jQuery(document).ready(function($)
{
$('#list').tableSorter();
});
jQuery(document).ready(function($) {
$('#list').tableSorter().tableScroll({height:500});
});
jQuery supports method chaining.
jQuery(document).ready(function($) {
$('#list')
.tableScroll({height:500})
.tableSorter();
});
jQuery(document).ready(function($)
{
$('#list').tableScroll({height:500});
$('#list').tableSorter();
});
Just put both under one DOM ready handler and use chaining:
$(document).ready(function() {
$("#list").tableScroll({ height: 500 }).tableSorter();
});
$(document).ready(function() {
$("#list").tableScroll({ height: 500 }).tableSorter();
});
I guess its fine to have more than one
jQuery(document).ready(function($) { .... }
both will be called on page on load body :). irrespective of no of call`s made, all will be called on page load only.
Simple, use
jQuery(document).ready(function() {
$('#list').tableScroll({height:500}).tableSorter();
});
There is a shorter version of jQuery(document).ready(function()) that you could use that would have the same result:
$(function() {
// code to execute when the DOM is ready
});
For this situation, using the elegant chaining:
$(function() {
$('#list').tableSorter().tableScroll({height:500});
});
For a discussion of the difference between these two approaches, see this very helpful question.
Here's how I would do it:
// Create an immediately-invoked function expression
(function ($) {
// Enable strict mode
"use strict";
// Cache the selector so the script
// only searches the DOM once
var myList = $('#list');
// Chain the methods together
myList.tableScroll({height:500}).tableSorter();
}(jQuery));
Writing your jQuery in an IIFE like this means you can run the code alongside other libraries that also use $, and you won’t get conflicts.
Be sure to include this JavaScript at the end of your document, just before the closing </body> tag.