Using different Jquery versions without conflicts

Question

So, let's start with situation. I have a website which uses Jquery 1.4.2 as the main version of Jquery. But user's are able to use custom templates which are using other versions(1.2.1,1.5.1,etc.). So it bring with it conflicts in some situations.
For example, here

//included in my main view
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
        $(function () {
              alert($().jquery);
          });
</script>

//included in custom template
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type="text/javascript">
        $(function () {
          alert($().jquery);
        });
</script>

So both of them are alerting 1.5.1(because of initializing when document is ready). So I want to prevent this situations.

Now I've get only one solution in my head - use noConflict(true) and change all $ and Jquery symbols to new symbol in all plugins used in my site.
Is there more elegant solution or I really need to rename all plugin's used in my site?

P.S. Another way maybe will be using backwards compatibility plugins, but in this situation I will need to include a lot of plugins to make it compatible with all versions.

If the plugins are structured properly, they will use the jQuery object which is defined at that moment. So you just have to load them in the proper order. For using the correct version in your own code, the ready callbacks get passed a reference to jQuery as first argument. — Felix Kling
– Felix Kling, Commented Apr 2, 2012 at 12:59
In my example, first alert is getting 1.5.1 instead of 1.4.2 and this situation can appear in lots of plugins, I suppose. — Chuck Norris
– Chuck Norris, Commented Apr 2, 2012 at 13:00
But plugins are normally defined as (function($) {...}(jQuery)), i.e. inside the plugin $ refers to whatever jQuery refers to at that moment. In your case, otoh, you are accessing the global $, which is overwritten later by the second jQuery script. The equivalent in your case would be $(function($) {...}). Give it a try. — Felix Kling
– Felix Kling, Commented Apr 2, 2012 at 13:01

Andreas Louv · Accepted Answer · 2012-04-02 13:06:14Z

6

Look at jQuery.noConflict()

**//included in my main view**
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
        $(function () {
              alert($().jquery);
          });
</script>

**//included in custom template**
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type="text/javascript">
        $151 = jQuery.noConflict();
        $151(function ($) { // In this scope $ === $151, or jQuery 1.5.1
          alert($().jquery);
          // $ !== jQuery.
          // $().jquery = 1.5.1
          // jQuery().jquery = 1.4.2
        });
        // outside the scope
        // $ === jQuery
        // $().jquery returns 1.4.2
</script>

How to use jQuery.noConflict();

$.noConflict() returns a copy of jQuery, you can capture it a variable like so:

var j = $.noConflict()

HTML:

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>

JavaScript:

// jQuery === $
//$().jquery === 1.5.1

.

jQ151 = $.noConflict();

.

// jQ151 !== $
// jQ151().jquery === 1.5.1
// $().jquery === 1.4.2

in jQuery.ready(function() {.. or simply jQuery(function() {.. the first argument is a local copy of jQuery:

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
    jQuery(function($) {
        // in this scope $ refers to jQuery version 1.4.2
    });
</script>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>

<script type="text/javascript">
    jQuery(function($) {
        // in this scope $ refers to jQuery version 1.5.1
    });
</script>

edited Apr 2, 2012 at 13:06

answered Apr 2, 2012 at 12:56

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marco Johannesen Over a year ago

Voted up. If there is an error, please state it after voting down! :)

Chuck Norris Over a year ago

In the question I have already wrote about noConflict and renaming $'s and jQuery's. The question is about finding more elegant way.

Andreas Louv Over a year ago

@ChuckNorris see edit. But i think I already mention this in the first answer.

Chuck Norris Over a year ago

I didn't see $ symbol as parameter of function first time. I will test it, thanks.

Collectives™ on Stack Overflow

Using different Jquery versions without conflicts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related