Can I use multiple versions of jQuery on the same page

Question

A project I m working on requires the use of jQuery on customers  Web pages  Customers will insert a chunk of code that we ll supply which includes a few  lt script gt  elements that build a widget in a  lt script gt -created  lt iframe gt   If they aren t already using the latest version of jQuery  this will also include  most likely  a  lt script gt  for Google s hosted version of jQuery   The problem is that some customers may already have an older version of jQuery installed  While this may work if it s at least a fairly recent version  our code does rely on some recently introduced functionality in the jQuery library  so there are bound to be instances when a customer s jQuery version is just too old  We can t require that they upgrade to the latest version of jQuery   Is there any way to load a newer version of jQuery to use only within the context of our code  that will not interfere with  or affect  any code on the customer s page  Ideally  maybe we could check for the presence of jQuery  detect the version  and if it s too old  then somehow load the most recent version just to use for our code   I had the idea of loading jQuery in an  lt iframe gt  in the customer s domain that also includes our  lt script gt   which seems like it might be feasible  but I m hoping there s a more elegant way to do it  not to mention without the performance and complexity penalties of extra  lt iframe gt s

User · Answer

Absolutely  yes you can  This link contains details about how you can achieve that  https   api jquery com jquery noconflict

User · Answer

Yes  it s doable due to jQuery s noconflict mode  http   blog nemikor com 2009 10 03 using-multiple-versions-of-jquery    lt  -- load jQuery 1 1 3 -- gt   lt script type  text javascript  src  http   example com jquery-1 1 3 js  gt  lt  script gt   lt script type  text javascript  gt  var jQuery 1 1 3     noConflict true    lt  script gt    lt  -- load jQuery 1 3 2 -- gt   lt script type  text javascript  src  http   example com jquery-1 3 2 js  gt  lt  script gt   lt script type  text javascript  gt  var jQuery 1 3 2     noConflict true    lt  script gt    Then  instead of     selector   function     you d do jQuery 1 3 2   selector   function    or jQuery 1 1 3   selector   function

User · Answer

After looking at this and trying it out I found it actually didn t allow more than one instance of jquery to run at a time  After searching around I found that this did just the trick and was a whole lot less code        lt script src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  type  text javascript  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  type  text javascript  gt  lt  script gt       lt script gt var  j   jQuery noConflict true   lt  script gt       lt script gt          document  ready function           console log     jquery      This prints v1 4 2        console log  j   jquery      This prints v1 9 1               lt  script gt    So then adding the  j  after the     was all I needed to do    j function               j   button-pro   on  click   function                  var el       cnt    this id replace  btn                      j   contentnew  gt  div   not el  animate                   height   toggle                   opacity   toggle                 100  hide                el toggle

User · Answer

I would like to say that you must always use jQuery latest or recent stable versions  However if you need to do some work with others versions then you can add that version and renamed the   to some other name  For instance   lt script src  http   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  type  text javascript  gt  lt  script gt   lt script src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  type  text javascript  gt  lt  script gt   lt script gt var  oldjQuery     noConflict true   lt  script gt    Look here if you write something using   then you will get the latest version  But if you need to do anything with old then just use oldjQuery instead of     Here is an example     function   console log   fn jquery      oldjQuery  function   console log  oldjQuery fn jquery      Demo

User · Answer

It is possible to load the second version of the jQuery use it and then restore to the original or keep the second version if there was no jQuery loaded before  Here is an example    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 8 2 jquery min js  gt  lt  script gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 6 4 jquery min js  gt  lt  script gt   lt script type  text javascript  gt      var jQueryTemp   jQuery noConflict true       var jQueryOriginal   jQuery    jQueryTemp      if  window jQuery           console log  Original jQuery     jQuery fn jquery           console log  Second jQuery     jQueryTemp fn jquery             window jQuery   window     jQueryTemp   lt  script gt   lt script type  text javascript  gt      console log  Script using second     jQuery fn jquery    lt  script gt   lt script type  text javascript  gt         Restore original jQuery      window jQuery   window     jQueryOriginal      console log  Script using original or the only version     jQuery fn jquery    lt  script gt

User · Answer

Taken from http   forum jquery com topic multiple-versions-of-jquery-on-the-same-page    Original page loads his  jquery versionX js  --   and jQuery belong to versionX  You call your  jquery versionY js  -- now   and jQuery belong to versionY  plus    and  jQuery belong to versionX  my jQuery   jQuery noConflict true   -- now   and jQuery belong to versionX     and  jQuery are probably null  and my jQuery is versionY

User · Answer

You can have as many different jQuery versions on your page as you want   Use jQuery noConflict      lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  type  text javascript  gt  lt  script gt   lt script gt      var  i   jQuery noConflict        alert  i fn jquery    lt  script gt     lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt   lt script gt      var  j   jQuery noConflict        alert  j fn jquery    lt  script gt     lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  gt  lt  script gt   lt script gt      var  k   jQuery noConflict        alert  k fn jquery    lt  script gt     DEMO   Source

[javascript] Can I use multiple versions of jQuery on the same page?

Examples related to javascript

Examples related to jquery

Examples related to iframe