Search code examples
jquerypluginsmultiple-instancesmultiple-versions

Unable to use jquery plugin using higher version of jquery, while loading two versions of jquery simultaneously

Our project is running on jquery 1.3.2, yes a very old version, I know. Anyways, we are not going to upgrade that right now. We just need to use jquery's chosen plugin (Download link - https://github.com/harvesthq/chosen) right now, which needs jquery 1.4 at least. So, I followed the following solution to load both versions of jquery on the same page -

https://stackoverflow.com/a/1566644/351903

But I am not able to call chosen on the newer version of jquery. Here is what I did -

1. In the jquery loading part

<script type="text/javascript" src="/js/jquery.js"></script>

<!-- Added for using jQuery chosen plugin -->
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript">
    var jQuery_1_4 = $.noConflict(true);
</script>

Note - I did not write the following for the older version of jquery , because I did not want to replace wherever I have written anything like $("something").somefunc() with this jQuery_1_3_2("something").somefunc() - 

<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

2. And then, in the plugin calling part

<link rel="stylesheet" type="text/css" href="/css/chosen.css"/>
<!--  <script type="text/javascript" src="/js/jquery.chosen/chosen.jquery.min.js"></script> -->
<script type="text/javascript" src="/js/jquery.chosen/chosen.jquery.js"></script>
<script type="text/javascript">
jQuery_1_4(document).ready(function() 
{
    jQuery_1_4("select#user_id").chosen();  //Trying to call chosen on the newer version of jquery
});
</script>

But I am getting this error jQuery_1_4("select#user_id").chosen is not a function.

However this is working properly - alert("see"+jQuery_1_4("select#user_id").attr("id"));.

So, the problem seems to be only while using the plugin and may be I have to do some tweak inside the plugin code, may be replace some $s with jQuery_1_4? But that does not sound good and I am not sure what is the proper way.

Solution

  • If you want to keep your old version as default, You should do var jQuery = $.noConflict(true); immediately after loading old version. However, you still need to check your $("something").somefunc() calls