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

<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 2

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.