- Previous post: Why does WordPress allow empty post titles and bodies on publish?
- Next post: Burn Notice (USA) - Dexter with spies
jQuery's no-conflict mode: Yet another reason why it's the best
Tuesday, July 3rd, 2007 at 3:29 pm
It took me a bit to find out why jQuery (now bundled with WordPress) was not working as I expected inside of the WP admin area. The script was being called, but my code like $("#foo") was not working. I really had no clue where to begin, since it still has all those old JS libraries/frameworks being called as well. It was due to Prototype being packaged with it and conflicting with the "$" shortcut.
Long story short, jQuery already planned for library conflicts and has a quick solution. The no-conflict mode allows you to define your own shortcut, and of course it works like a charm.
It's easy to do - just put this line in your code somewhere:
var J = jQuery.noConflict();
Now $("#foo") will be J("#foo") and it will not conflict with any other libraries that may be installed. I hope WP gets rid of all the other stuff and goes with pure jQuery and plugins soon enough though 
This entry was posted and is filed under Development, WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Comment on this post:
15 Responses to "jQuery's no-conflict mode: Yet another reason why it's the best"
[...] jQuery’s no-conflict mode: Yet another reason why it’s the best - I’m sold, been loving jQuery so far. [...]
excellent solution! worked like a charm! thank you!
Can I see your html, I don't understand where to put it. I am not to good with javascript.
Thanks
This also fixes the issue between lightbox2 and jQuery Multi Level CSS Menu #2...
Genious
THIS ROCKS! I been starring at my wordpress theme code for days.. I know it must be some conflict going on there.. and YOU .. YOU GAVE ME THE ANSWER! this is so awesome!
Sorry for being stupid. But I tried the noConflict() function. I placed it RIGHT AFTER jQuery.js is called, but BEFORE prototype is called. In between these two, I had other UI libraries being called as well. I assigned jQuery to new var $j, and I changed the call in my function (which is called after all the libraries) to refer to $j instead of $, it still doesn't work.
It looks like my UI libraries functions are now broken (from the error I am getting like "the.style" is null or not an object).
Can you please help?? Thanks so much in advance!
Honestly, I don't think I can help. I got lucky with this a while ago, and I simply done have the mental patience to try and work with it again... sorry
Thanks for this great solution.
But I have one problem with this.
I am using "jquery.blockUI.js" also.
I have put "var JQ = jQuery.noConflict();"
I changed all "$" with "JQ" in "jquery.blockUI.js"
but as I use "JQ.blockUI({.......});", I am getting the javascript error that "JQ.blockUI is not a function"...
So what should I do to make working ?
I don't know... I'd try the author of blockUI
okay, so i'm running proto/jquery together and it works fine on Safari and FF with out having to add jQuery.noConflict(); but it won't work on IE6/7... separately both scripts work fine in IE6/7. When I open my page in IE6/7 the jquey.js works but the proto/scriptac opens my lightbox in a new page... I tried the jQuery.noConflict(); fix with no results. I'm not sure if i'm implementing it properly...i'm new to this and eager to learn. I also tried moving jquery script above the proto script recommended on other sites and nothing.
here is the code i need help with. help me obe wan you're my only hope...
here is the code i need help with.
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,420,450); return false;
});
});
sorry. here is the entire code
okay, so i'm running proto/jquery together and it works fine on Safari and FF with out having to add jQuery.noConflict(); but it won't work on IE6/7... separately both scripts work fine in IE6/7. When I open my page in IE6/7 the jquey.js works but the proto/scriptac opens my lightbox in a new page... I tried the jQuery.noConflict(); fix with no results. I'm not sure if i'm implementing it properly...i'm new to this and eager to learn. I also tried moving jquery script above the proto script recommended on other sites and nothing.
here is the code i need help with. help me obe wan you're my only hope...
here is the code i need help with.
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,420,450); return false;
});
});
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,420,450); return false;
});
});
Sorry dude, but I've got too much on my plate right now to be able to help. I haven't touched this code in a long time.
You should try #jQuery on irc.freenode.net ...
Worked like a charm with mootools and jquery conflict in joomla. I couldn't get virtuemart working, but by simply adding your code "var J = jQuery.noConflict();" all problems disappeared! Many Thanks
i've benn sitting in front of this problem for hours. i knew that there was a conflict, but i couldnt get it to work, since I read this article.
thank you very much