JQuery is not working in wordpress – Solution
Since WordPress version 2.x, jQuery is a build-in Javascript library, explicitly include the jQuery library into WordPress is not necessary.
Problem
The jQuery is not working in WordPress plug-in writing? When you try to test a simple jQuery effect like following
$(document).ready(function(){ alert('test'); });
It’s just not working, no alert message box pop up. The same script is working as expected in single HTML page. What’s the heck? Is there any interoperability issues between jQuery and WordPress?
Solution
In WordPress, the$() syntax is always used by other scripting library, and causing the conflict issue and fail to call the jQuery function. You should use jQuery() instead…
jQuery(document).ready(function(){
alert('test');
});Alternatively, you can use noConflict() …
$j=jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){ alert('test'); });
P.S jQuery.noConflict(); – http://wordpress.org/support/topic/141394
Never use jQuery handy function $() in WordPress plugin. You have to use jQuery() or jQuery.noConflict() to work between jQuery and WordPress.
Recommended for You
Java Frameworks Survey
Loading ... Loading ... Loading ...All J2EE Tutorials
Servers Survey
Loading ... Loading ...
HI,
your explanation is as close as a solution to my problem can be. That’s why I’m posting here.
My js code already uses the “jQuery()” call. The problem is that I want to use another js script (farbtastic) in conjunction with WordPress’ internal jQuery lib. Inside the farbtastic, $ is used and I get a ‘$ is undefined’ error though farbtastic is called from within ‘jquery(Document).ready(function($){…’.
The scripts (my “colorpicker.js” and “farbtastic.js”)are included with “wp_enqueue_script()”.
The code works flawlessly when farbtastic.js and another instance of jQuery is included at “wp_head()”.
If you are interested in the problem, you may have a look at the website.
Thanks!!
You’re a lifesaver. This worked a charm!!
I think the same, thanks mkyong!
hi… thanks for info.. i had the same problem. now it has cleared. but still one more problem. it takes too time to load in ie8. pls could any one help me. i ll post the code.
$j=jQuery.noConflict();
$j(document).ready(function() {
$j(‘input[type="text"]‘).addClass(“idleField”);
$j(‘input[type="text"]‘).focus(function() {
$j(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ”;
}
if(this.value != this.defaultValue){
this.select();
}
});
$j(‘input[type="text"]‘).blur(function() {
$j(this).removeClass(“focusField”).addClass(“idleField”);
if($.trim(this.value == ”)){
this.value = (this.defaultValue ? this.defaultValue : ”);
}
});
});
Huge help! This was driving me crazy. Thanks a lot
Thanks for the heads up – had me confused for a bit. They really should change that since jQuery is fast becoming the defacto standard for js frameworks.
Good to see this. But jquery at front end is different from backend.
thanks for the info. I am having problem with wordpress theme and it cant display sidebar and my tweets. it says “jQuery is disabled and this widget needs it” how do i fix it? please help
Thanks for this helpful post. I’m having some issues with jQuery on my site. Basically, I can’t get jScrollPane (custom scrollbars) to work as it’s not recognizing WordPress’ built-in jQuery library. Do you think you can take a look and see where I went wrong? I’m thinking I need to use noConflict() but I’m not entirely sure. I would really appreciate some help! Here is the specific page: Page
Thanks! My jquery works now. Will this work until another plugin uses $j = jQuery.noConflict() and assigns $j? Also, any idea how to include a newer version of jquery? It looks like the default version with my WP is kind of old.
Thank you for shedding some light on this. I was wondering why a basic line like alert($(“contact_form”)); was giving me an “Object not supported” error. Strangely it was only having this problem in IE.
IE and Mozilla browser implementation is very different, may be you can give me full example here or by email, so that i can dig it in detail
I’m losing my mind. Building a site for client and jquery works well in the builder (yahoo site builder) but when I publish it, nothing happens. I found the code from http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
downloaded into the site folder, embeded the code is head of page, and everything was great until published.
Anyone please help.
Mario
Mind to provide the URL which jQuery is not working?
Hi Mkyong, I figured it out but thank you. My jquery was not filed into the root directory therefore working on ite builder but not on the web. As soon as the file was placed in the root, viola. Take care.
Mario