Two different versions of JQuery in the same HTML page

Question

I have an HTML document where I have referenced jQuery version 1.2.2 in the header for thickbox and I have later referenced jQuery 1.7.1 just before the </body> tag which is for a picture slideshow.

The problem is that the thickbox won't work unless the reference for jQuery 1.7.1 is removed which then stops the slideshow from working.

I have googled around to find out about $ conflict but none of the suggested solutions worked.

The most common one I have seen and did tried is: var $j = jQuery.noConflict();

How can I resolve this?

Answer 1

If the plug-ins are well-behaved, then this should work:

<script src="jquery-1.2.2.js"></script>
<script src="thickbox.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="slideshow.js"></script>

(Obviously those script names are made up.) Here's an example ( source ) (I used jQuery 1.4.2 and jQuery 1.7.1 because Google doesn't host 1.2.2).

The above works with well-behaved plug-ins because a well-behaved plug-in doesn't rely on the global $ at all, but rather uses the value of the jQuery global as of when it was loaded and grabs a reference to it in a closure, then uses that local reference throughout the plug-in's code, like this:

// Example plug-in setup
(function($) {
    // ...Plug-in code using `$` here -- note it's a *local* `$`,
    // not the global `$`, and not the global `jQuery`...
})(jQuery);

or

(function() {
    var $ = jQuery;

    // ...Plug-in code using `$` here -- note it's a *local* `$`,
    // not the global `$`, and not the global `jQuery`...
})();

Both of those grab the global jQuery value as of when the plug-in is loaded and then use their local alias throughout.

If the plug-in wants to wait for the ready event, it can also do this:

jQuery(function($) {
    // ...Plug-in code using `$` here -- note it's a *local* `$`,
    // not the global `$`, and not the global `jQuery`...
});

...which uses the jQuery function passed into the ready handler.

Any of those three would work correctly (with thickbox seeing jQuery 1.2.2, and slideshow seeing jQuery 1.7.1) with the script load order listed above.

But the "if" in my opening sentence is a big "if". A lot of plug-ins are not written to be bullet-proof in this way.

---

The above notwithstanding, I would migrate away from any plug-in that requires jQuery 1.2.2 in order to work, and wherever possible (and it's almost always possible) avoid having to load two different versions of any library, including jQuery, in the same page.

Answer 2

<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script>
<script type="text/javascript">
  var jQ122 = jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
  var jQ171 = jQuery.noConflict();


  (function($) { 
    $(function() {
      // here $ is jQuery 1.2.2
    });
  })(jQ122);


  (function($) { 
    $(function() {
      // here $ is jQuery 1.7.1
    });
  })(jQ171);
</script>

Answer 3

I would not advise using two different versions of jQuery. There are some other alternatives to thickbox that works perfectly with the latest jQuery.

Answer 4

What you want to do is an extremely bad practice (you should indeed migrate all code to the same version) but it can theoretically be done...

You would need to make changes to the respective plugins anyways tho... consider this code:

<script src="jquery-1.4.js"></script>
var jQuery14 = jQuery;
<script src="jquery-1.7.js"></script>
var jQuery17 = jQuery;

you would then change the code of your plugins at the point where jQuery is handed to the plugin, which would look similar to this:

(function( $ ){
     // all your plugins code would be here
})( jQuery );     // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables

Be advised.. this is veryveryvery messy to say the least! write clean code or pay later! :)

Answer 5

Although you could use jQuery.noConflict(); to declare separate versions of jQuery at the same time.

I've often had some problems with IE8 with certain libraries when I do that.

So, an alternate solution would be to use an iframe to load a page within your current page.

Have a given version of jQuery on one page, and another on the second.

For example:

<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>