jQuery noConflict Rule in WordPress

by Woei Yu, April 2, 2015

I became enthralled with jQuery when I started working with it a few years back. To me, it is the best thing since sliced bread.

I had been working on web applications for years and one of my biggest frustrations was dealing with cross browser issues so stumbling across jQuery was literally a god-send.

But when I started to use jQuery with WordPress, problems that didn’t previously exist started popping up and I simply couldn’t understand why.

It was only after I came across noConflict that everything became clear.

So, in this article, I am hoping to make things easier for you by giving you the benefit of my (sometimes painful) experiences.

How jQuery Works

When jQuery is included on a page, all the functions, variables, methods and properties are wrapped within an object and cannot be accessed by the outside world.

But jQuery exposes itself by defining the global variables “jQuery” and “$” which refer to this same object and it is through these global variables that we can access the various properties and methods of the jQuery library, like jQuery.ajax or jQuery.css.

However, Problems Can Arise

Other JavaScript libraries (like prototype.js) were around long before jQuery became popular.

And if you are include jQuery along with any other JavaScript library that also uses the $ variable, you can, and will, run into conflicts with jQuery.

Even if you choose to ignore that potential nightmare, jQuery itself can cause problems.

You have to remember that there are numerous versions of jQuery out on the Web and each new version that is released is to fix bugs, improve performance, tighten security, and add new features.

However, it’s not always possible to upgrade as soon as a new version comes out. The new version may contain an API change that would break some of your functionality or you may be using a plugin that isn’t compatible with the new version.

This is particularly relevant in WordPress where different plugins may use different jQuery versions.

For example, if your plugin is using functionality available only in version 2.02 but WordPress shipped with jQuery version 1.11 then you have a problem.

The question is, can both versions of jQuery be accessed at the same time?

The answer is yes and this is where jQuery’s noConflict method can help.

Using noConflict

There are basically three solutions to these problems and they all involve the noConflict method.

Method 1: Releasing $ and Using jQuery

If you want to use another JavaScript library alongside of jQuery, simply return control of $ back to the other library by using $.noConflict(). Any reference of $ is saved during jQuery initialization and the noConflict method simply restores it.

Method 2: Define Your Own jQuery Shortcut

Use the noConflict method and assign a new variable name (which can be anything you like) to be used in your code.

With this method, you can use both the new alias myJQuery through the rest of your application. But the full function name jQuery will refer to any previous version of jQuery that was loaded before the version your code loaded.

Method 3: Using Closures or Anonymous Functions

If you already have a lot of jQuery code which uses the $ shortcut and you do not want to change it all, wrap your code in an anonymous function and pass the $ sign in as a parameter. This allows you to access jQuery using $ alias throughout; however outside of it, you will have to go back to using jQuery.

The drawback of this method is that you will not be able to refer to other $ based libraries inside the anonymous function.

noConflict caveat

There is an interesting caveat to the noConflict method.

jQuery.noConflict() (or the default jQuery.noConflict(false)) only restores the $ to its previous value.

To restore both jQuery and the $ to previous values,  true as a parameter as in jQuery.noConflict(true).

This difference is important to keep in mind which I will explain later on.

What This Means for WordPress Developers

When dealing with WordPress, it is understood that you really have no control over the blog where your plugin or theme is being used.

Ignoring the fact that WordPress upgrades may also include an upgraded jQuery library which may break any functionality that isn’t compatible with the new jQuery version; it can be even worse because you’re likely dealing with WordPress plugins or themes created by various developers who load multiple versions of jQuery irresponsibly.

In most cases, your hands are tied but what you can do is to use jQuery responsibly yourself, and here are a couple of tips for doing just that.

Tip 1: Always Try to Use WordPress’ jQuery

Keep up to date on the jQuery version of WordPress is using and make sure your theme or plugin works well with that.

If there are some other plugin or themes that ignore the gentlemanly code of conduct by deregistering the default WordPress version or include their jQuery file haphazardly, it is the blog’s owner problem not yours.

Tip 2: Utilize noConflict

If you can’t use the default WordPress jQuery and have to load a specific version of jQuery, then utilize jQuery.noConflict correctly.

Load the version of jQuery that you need but use method 2 where you define your own shortcut but make sure to destroy your version of jQuery and $ from the namespace by passing in the “true” parameter into the noConflict method.

This ensures that both jQuery and $ are pointing to whatever jQuery version was loaded previously so you won’t break anyone else’s code – including WordPress’!

Conclusion

When it comes to WordPress, jQuery.noConflict() is an important method  that I have come to learn and use effectively.

Be sure to use it appropriately to protect your code and to be a good citizen and protect other people’s code.

While it doesn’t help that the documentation is vague but once you understand how it works then jQuery’s noConflict method is a great way of dealing with compatibility issues in any jQuery application.

 

No Comments


Leave a Reply

Your email address will not be published Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*

Let me know what you think

RSS
Follow by Email
Facebook
Google+
http://woeiyu.com/software/wordpress/jquery-noconflict-using-it-properly/">
Twitter
SHARE
LinkedIn

Recommendations

Enjoy this article? Please spread the word :)