Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use multiple versions of jQuery simultaneously

Monday, September 14th, 2015 by Servage

jquerySometimes you need to include multiple versions of jQuery into the same web page. While this is definitely not a good or preferred scenario, it can work under the right circumstances. The use cases where running multiple versions of jQuery may be required are situations where different libraries need different jQuery versions to work properly. Generally speaking you should avoid that by using libraries that can rely on the same version of jQuery, which preferably should be the newest stable version at any given time. However, that may not always be possible, for example if you are working with external resources or web scrapers that inject Javascript into foreign sites in order to add some functionality for that process.

Understanding the jQuery and $ variable

In most sample code around you see the dollar sign being used for jQuery, however, that is just an alias for the actual jQuery variable.

// Select all elements with “some_class”
$(‘.some_class’);

// The following does the same thing
jQuery(‘.some_class’);

Both of the above cases assume a standard implementation of jQeury in your site.

Register jQuery with custom aliases

It is important to know that jQuery essentially just gets loaded into these variables, but does not absolutely need to be registered with those variables. Image the case where you need multiple jQuery versions. For simplicity let us say two versions, jQuery1 and jQuery2. You can register them in your script by using the jQuery.noConflict() method. This method allows you to assign jQuery to a different variable.

// Restore the $ (remove jQuery from the $)
jQuery.noConflict();

// Below would NOT work anymore
$(‘.some_class’);

// Below would still work
jQuery(‘.some_class’);

You may also want to free the “jQuery” variable, which can be done as well.

// Pass “true” as argument to free the “jQuery” variable
jQuery.noConflict(true);

// Now jQuery is undefined, and below would no longer work
jQuery(‘.some_class’);

Freeing the “jQuery” variable only makes sense if you assign jQuery to another variable alias. Otherwise the library is not available for usage in your script. Below is an example of adding two jQuery versions and assigning them to different variables.

// Include jQuery library 1 and:
var jQuery1 = jQuery.noConflict(true);

// Include jQuery library 2 and:
var jQuery2 = jQuery.noConflict(true);

Now you have two different versions of jQuery running under two different variable aliases jQuery1 and jQuery2, while jQuery and $ are bot unused.

Please notice that some libraries may require a general jQuery variable being available, so you should consider letting the primary jQuery version still be available under the general “jQuery” alias, and just create version-aliases like jQuery1, jQuery2, jQuery3 … for additional libraries.

Use multiple versions of jQuery simultaneously, 4.2 out of 5 based on 9 ratings
Categories: Tips & Tricks

Keywords: ,

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.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.