13 Sep 2012

Sometimes you find yourself in a situation where you need to use a new version of jQuery but the project already uses an older version and you're not at liberty to just update it. It's possible to use multiple versions of jQuery in the same document.

This just requires the use of jQuery.noConflict() in combination with closures. This way, it is very clear what you're doing and you won't have to refactor all of your jQuery code.

Please remember that although it is possible to do this, and even include more versions of jQuery, including so many versions is a big performance hit, so I wouldn't recommend it.

First you'll include the new version of jQuery and assign it to a variable.

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
var jQuery18_1 = $.noConflict(true);
</script>

Then you'll include the older version. It will overwrite the $ variable.

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

Normally, at this point to use the new version would require you to do:jQuery18_1("#foo");

but using a closure, you can wrap your code so you'll only have to specify the version once:

jQuery181(
  function() {
    var $ = jQuery181;
    $("#foo");
  }
);

The following example page will log:

jQuery1=1.4.4

jQuery2=1.8.1

jQuery3=1.4.4

<html>
  <head>
    <title>multi-jquery</title>
    <!-- bleeding edge -->
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
    var jQuery_1_8_1 = $.noConflict(true);
    </script>
    <!-- legacy (default) -->
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  </head>
  <body>
    <div id="info"></div>
    <!-- Here is where the OLD scripts are included. They use jQuery 1.4.4 -->
    <!-- The contents of <script src="old.js"></script> are: -->
    <script>
      // Execute immediately when loading
      $("#info").before("jQuery1=" + $().jquery + "<br/>");
    </script>
    <!-- Here is where the NEW scripts are included. They use jQuery 1.8.1 -->
    <!-- The contents of <script src="new.js"></script> are: -->
    <script>
      jQuery_1_8_1(
        function() {
          var $ = jQuery_1_8_1;
          
          var com = {};
          com.acme = {};
          com.acme.logVersion = function(){
             $("#info").before("jQuery2=" + $().jquery + "<br/>");
          };
      
          $(document).ready(function(){
            com.acme.logVersion();
          });
        }
      );
    </script>
    <!-- Here a final script is included. It is after the closure 
     to use the new jQuery version, so it should just use the old version. -->
    <!-- The contents of <script src="other_old.js"></script> are: -->
    <script>
      var nl = {};
      nl.foo = {};
      nl.foo.logVersion = function(){
         $("#info").before("jQuery3=" + $().jquery + "<br/>");
      };
      
      $(document).ready(function(){
        nl.foo.logVersion();
      });
    </script>
  </body>
</html>