Wordpress how to use jquery and $ sign
JqueryWordpressJquery Problem Overview
I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper like this:
$(document).ready(function(){
// jQuery code is in here
});
I am calling this script from within the WordPress Dashboard and am loading it AFTER the jQuery framework has loaded.
When I check the page in Firebug I constantly keep receiving the error message:
> TypeError: $ is not a function > > $(document).ready(function(){
Should I maybe wrap the script in this function:
(function($){
// jQuery code is in here
})(jQuery);
I have had this error quite a few times and am not sure how to handle it.
Any help would be greatly appreciated.
Jquery Solutions
Solution 1 - Jquery
By default when you enqueue jQuery in Wordpress you must use jQuery
, and $
is not used (this is for compatibility with other libraries).
Your solution of wrapping it in function
will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).
If you must use document.ready
, you can actually pass $
into the function call:
jQuery(function ($) { ...
Solution 2 - Jquery
This should fix it:
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});
Put simply, WordPress runs their own scripting before you can and they release the $
var so it won't collide with other libraries. This makes total sense, as WordPress is used for all kinds of web sites, apps, and of course, blogs.
From their documentation:
> The jQuery library included with WordPress is set to the noConflict() > mode (see wp-includes/js/jquery/jquery.js). This is to prevent > compatibility problems with other JavaScript libraries that WordPress > can link. > > In the noConflict() mode, the global $ shortcut for jQuery is not > available...
Solution 3 - Jquery
This solution worked for me
;(function($){
// your code
})(jQuery);
Move your code inside the closure and use $
instead of jQuery
I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma
...after searching too much
Solution 4 - Jquery
var $=jQuery.noConflict();
$(document).ready(function(){
// jQuery code is in here
});
Credit to Ashwani Panwar and Cyssoo answer: https://stackoverflow.com/a/29341144/3010027
Reasons why in WordPress jQuery and not $ is used: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/
Solution 5 - Jquery
You can avoid confliction like this
var jq=jQuery.noConflict();
jq(document).ready(function(){
alert("Hi this will not conflict now");
jq('selector').show();
});
Solution 6 - Jquery
Try this:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Solution 7 - Jquery
Also, I find the good solution for use jQuery noConflict mode.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
I found this solution from here TryVary.com.
Solution 8 - Jquery
You have to pass $ in function()
<script>
jQuery(document).ready(function($){
// jQuery code is in here
});
</script>
Solution 9 - Jquery
replace $
sign with jQuery
like this:
jQuery(function(){
//your code here
});
Solution 10 - Jquery
Double check your jQuery references. It is possible that you are either referencing it more than once or you are calling your function too early (before jQuery is defined). You can try as mentioned in my comments and put any jQuery reference at the top of your file (in the head) and see if that helps.
If you use the encapsulation of jQuery it shouldn't help in this case. Please try it because I think it is prettier and more obvious, but if jQuery is not defined you will get the same errors.
In the end... jQuery is not currently defined.
Solution 11 - Jquery
Use
jQuery(document).
instead of
$(document).
or
Within the function, $ points to jQuery as you would expect
(function ($) {
$(document).
}(jQuery));
Solution 12 - Jquery
(function( $ ) {
"use strict";
$(function() {
//Your code here
});
}(jQuery));
Solution 13 - Jquery
What worked for me. The first library to import is the query library and right then call the jQuery.noConflict() method.
<head>
<script type="text/javascript" src="jquery.min.js"/>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function(){
//.... your code here
});
</script>
Solution 14 - Jquery
<script>
var jq=jQuery.noConflict();
(function ($)
{
function nameoffunction()
{
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
now use jq in place of jQuery
Solution 15 - Jquery
You come across this issue when your function name and one of the id names in the file are same. just make sure all your id names in the file are unique.
Solution 16 - Jquery
You can use
jQuery(document).ready(function(){ ...... });
or
(function ($) { ...... }(jQuery));
Solution 17 - Jquery
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
If you are using jquery for frontend, you can achieve it by passing $deps as jquery