Artmann
Artmann

Reputation: 130

Using multiple JQuery versions and noConflict

I'm working with a plugin for an application which has a codebase I do not want to change due to update issues.

The Application is including Jquery 1.3.2 in the header and uses it heavily throughout the site. Not thinking about this, I went ahead and wrote my plugin using version 1.8.0 and it turns out this messes up the functions of the original application.

I've been trying to implement the noConflict method but with no success.

# Site loads jQuery1.32 and other jQuery plugins

# My awesome php & html code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict(true);  
$jq.DoSomeJQueryStuff();
</script>

How can I implement noConflict in this scenario?

Upvotes: 2

Views: 3533

Answers (2)

Charles Jourdan
Charles Jourdan

Reputation: 810

I think it somthing like this you need.

If we suppose the links are added in this order :

  1. jquery-1.3.2.js
  2. jquery-1.8.0.js

We have this :

jQuery.noConflict();

// here you can execute javascript with jquery version 1.3.2
console.log($.fn.jquery);


jQuery(function($){
    // here you can execute javascript with jquery version 1.8.0
    console.log($.fn.jquery);
});

You can find an example on this Jsfiddle.

Upvotes: 0

Derek Hunziker
Derek Hunziker

Reputation: 13141

You'll want to call noConflict() on whichever comes first (or both). Without calling it on the first instance, there will already a "conflict" by the time you include the script definition below.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
   var $jQ180 = jQuery.noConflict(true);
   document.write($jQ180().jquery); // 1.8.0
</script>​

...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
    document.write($().jquery); // 1.3.2
</script>

Upvotes: 1

Related Questions