Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

jquery noconflict

So in wordpress it is suggested to use the '$' within jQuery like so

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

Is there any sort of fall back for doing this normal practice so as to make sure any non-wordpress projects can be scaled out in the future to use other libraries without conflicting with jQuery?

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I've seen a few solutions. Two I see are setting the $ variable right off the bat.

One is $ = jQuery.noConflict(true); And another is $ = jQuery;

I can't tell you how effective those two are, but I see them a lot. The way I personally deal with this is deregister the WP core jquery script, and than bring in the jQuery from Google's CDN.

This is basically just a cut and past code, just update the version of jQuery in the URL if needed. http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/

You get the benefits of loading jQuery from a CDN, but you also get the downsides of it too. This will will help you avoid the jQuery no-conflict issues. I use the CSS-tricks method on my WP site personally.

John Weland
John Weland
42,478 Points

Yeah i meant if I were not working in WordPress and just in hand-code, are there any issues to still calling jQuery in this way to minimize any conflicts to other libraries I may add to a project later?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You can call jQuery this way. It will start to bloat the file size if done too much.

One thing that is cool though is if you're using another library that uses the $ sign, you can just call ```$.noConflict(); and than below that you can use the $ sign for that library. So it still makes it really easy, and safe to use the $ sign and not have to type out jQuery every time.

http://api.jquery.com/jquery.noconflict/

Michael Hulet
Michael Hulet
47,913 Points
Michael Hulet
Michael Hulet
47,913 Points

I think it's actually asking you to replace "jQuery" with a $. This is an alternative method of calling jQuery, that is officially implemented by the jQuery Foundation. In other words, instead of using the code you wrote, it should be:

$(document).ready(function() {});

There are no drawbacks to this that I know of, but it should just be faster to type and be lighter on the network when requesting your site, so using the method I outlined is better, in my opinion

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Not quite. By default Wodpress uses a version of jQuery that comes shipped with WP. It lives in the WP core folders, but it has jQuery no confilict mode true.

So by default there would be an error in the console with your code that the $ symbol is undefined. By defining the $ in the anonymous function it would than allow you to use it. But until the $ sign is defined, you can't call it.

John Weland
John Weland
42,478 Points

Right i get that $ is shorthand for jQuery however in WordPress especially if another library is also using $ as there caller there might be a conflict. So by calling jQuery and passing in $ within it it will make sure any code there will reference jQuery.