CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Chuck Norris
Chuck Norris

Reputation: 15190

Using different Jquery versions without conflicts

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.

Upvotes: 1

Views: 853

Answers (1)

Andreas Louv
Andreas Louv

Reputation: 47099

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>

Upvotes: 6

Related Questions