68

My company has purchased a product that renders an ASP.NET control on the page. This control uses jQuery 1.2.3 and adds a script tag to the page to reference it. The developers of the control will not support use of the control if it modified in any way (including modification to reference a different version of jQuery).

I'm about to start development of my own control and would like to use the features and speed improvements of jQuery 1.3. Both of these controls will need to exist on the same page.

How can I allow the purchased control to use jQuery 1.2.3 and new custom development to use jQuery 1.3? Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery?

Alex Angas
  • 59,219
  • 41
  • 137
  • 210
  • 1
    Does the author of the author of the control not release updates? Or is the newer version incompatible? It is very strange that a commercial third party control vendor created a control that is hard-coded to a particular version of an open source javascript that is frequently updated. – BlackMael Feb 09 '09 at 14:18
  • I can't see how you are not screwed if you use muliple server controls that insist on fixed versions of jQuery. – BlackMael Feb 09 '09 at 14:20
  • 1
    Not every plugin author meticulously updates/is able to update his code on a regular basis. I too faced this problem, but then I switched over to a frequently updated, community-driven equivalent. – Robin Maben Dec 29 '11 at 12:30
  • We have a similar problem that comes from being in a portal environment. Every portlet developer can/will bundle the version of jQuery that they tested their application/portlet with and those will most times not be synced. – Stefan Jan 25 '12 at 16:41

5 Answers5

100

You can achieve this by running your version of jQuery in no-conflict mode. "No conflict" mode is the typical solution to get jQuery working on a page with other frameworks like prototype, and can be also be used here as it essentially namespaces each version of jQuery which you load.

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

This change will mean that any of the jQuery stuff you want to use will need to be called using jq13 rather than $, e.g.

jq13("#id").hide();

It's not an ideal situation to have the two versions running on the same page, but if you've no alternative, then the above method should allow you to use two differing versions at once.

Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery?

If you needed to add another version of jQuery, you could expand on the above:

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

The variables jq13 and jq131 would each be used for the version-specific features you require.

It's important that the jQuery used by the original developer is loaded last - the original developer likely wrote their code under the assumption that $() would be using their jQuery version. If you load another version after theirs, the $ will be "grabbed" by the last version you load, which would mean the original developer's code running on the latest library version, rendering the noConflicts somewhat redundant!

ConroyP
  • 40,958
  • 16
  • 80
  • 86
  • 11
    Is the ordering really important? Isn't the whole point of the noConflict function to return the "$" variable to the original owner? Ordering shouldn't be important. What is important, though, is that jQuery.noConflict is called **immediately** after the version of jQuery that should go into non-conflict mode is loaded. – mtyaka Nov 25 '09 at 19:00
  • 4
    mtyaka is exactly right. If you pass in the 'true' parameter, you do not need to worry about the order in which you load the scripts. Passing in 'true' to noconflict restores both the 'jQuery' variable and the '$' variable to what they were. Without it, only '$' is restored. – Muhd Mar 05 '11 at 05:26
24

As said ConroyP you can do this with jQuery.noConflict but don't forget var when declaring variable. Like this.

<script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

You can connect all $'s to jq13 by adding (jq13) after function's }). like this

(function($) {
 ... 
})(jq13);
Tigran Tokmajyan
  • 1,937
  • 7
  • 25
  • 36
  • 5
    Not having var isn't a big deal here. Variables defined without var have global scope. You **want** the jq13 object to have global scope. – Alana Storm Mar 27 '10 at 19:29
  • 3
    Implicit globals is bad coding practice. If you are sure you want a global variable you should declare it in the global scope with a var keyword, or, attach the variable to the window object manually if inside a function. See http://javascript.crockford.com/code.html#variable%20declarations – Muhd Mar 05 '11 at 05:37
2

It seems like the order doesn't matter... for example: http://gist.github.com/136686. The console output is at the top and all the versions seem to be in the right places.

Aaron Gibralter
  • 4,773
  • 3
  • 35
  • 50
1

make it false to work

var jq16 = $.noConflict(false);
Hisen
  • 13
  • 9
0

In the second version declare a variable as $.noConflict(true). And use the declared variable in place of $ used in the jquery code. Please check the below code : This code is used after the declaration of second versions of jquery:

<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) {

        var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
        var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
        $ddl.select2();
        $ddl1.select2();

        $ddl.bind("change keyup", function () {
            $ddl.fadeIn("slow");


        });

        $ddl.bind("change keyup", function () {
            $ddl1.fadeIn("slow");


        });
    }
Yasel
  • 2,920
  • 4
  • 40
  • 48
Manish Ojha
  • 51
  • 1