CODEWITHSUNDEEP
jqueryjquery-ui
Taha Rehman Siddiqui
Taha Rehman Siddiqui

Reputation: 2533

How to use two different version of jQuery UI

The custom control i am working on contains jquery ui 1.9.2, but the projects it is supposed to be inserted in could contain any version. So, is there any way that I could change something in the library, or I could make an instance of my version of jquery ui and call the functions I need through that instance? Like, for example I make some instance named "JQUI19" and then lets say I call a function combobox as

$('#someElement').JQUI19.combobox();

or in any other way. I remember I saw somewhere a similar thing was done like 

myJQ('#someElement').combobox();

but cant recall where I saw that.

Upvotes: 1

Views: 1003

Answers (2)

Taha Rehman Siddiqui
Taha Rehman Siddiqui

Reputation: 2533

In the Jquery library, after the last line, type

var mySelector = $;

Include the other version after you include this in your page.

now, in all the scripts that you want to use with this jquery version(you can even use a different version of jquery ui and other libraries too), replace $ with mySelector. Use replaceall, but would be a couple of places, like in regex match functions, where you would want to replace mySelector back to $. This problem was bugging me for quite a long time. And it just got solved.

Note : Be sure that you do not replace any $ inside the jQuery original script.

Upvotes: 0

James
James

Reputation: 3293

Never use two versions of UI.

If you are packaging something that will be reused by multiple clients and want to check if the client has jquery UI already available then you can use something like this:

if (typeof jQuery.ui !== 'undefined'){
// Add Google UI Library To Head
(function() {
  var jqUiScript = document.createElement('script'); jqUiScript.type = 'text/javascript'; jqUiScript.async = true;
  jqUiScript.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jqUiScript, s);
})();


}

Upvotes: 3

Related Questions