Using controls requiring different jQuery Versions

Question

I am trying to use an Apycom menu requiring jQuery 1.3.2 on the same pages as Flexigrid for Rails which depends on jQuery 1.2.3. To add to the confusion I'm trying to include the Rails 'prototype.js' and use this as well. Here is my include order:

<%= javascript_include_tag :defaults %>
<%= yield(:head) %>
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/flexigrid.js" type="text/javascript"></script>
<script type="text/javascript">
    jq123 = jQuery.noConflict(true)
</script>
<script src="/javascripts/menu/jquery.js" type="text/javascript"></script>
<script src="/javascripts/menu/menu.js" type="text/javascript"></script>
<script type="text/javascript">
    jq132 = jQuery.noConflict(true)
</script>

When the page I'm testing loads up, Firebug gives me the following:

$ is undefined
  (240 out of range 237)                                      menu.js (line 240)

and consequently my menus don't work (at least not the parts that matter). I don't have a Flexigrid grid on this page so I can't attest to whether that even works. I saw this answer (How do I run different versions of jQuery on the same page?) but it doesn't completely work. My local JavaScript works but the jQuery plugins don't seem to be happy.

Any suggestions?

Answer 1

Menu.js is assuming the jQuery function is called $. When using jQuery.noConflict you need to update the references to the jQuery function to whatever you named it (in this case jq123 or jq321).

Answer 2

@MightyE makes a good point that menu.js file is referencing the $ object incorrectly. An easy solution to fix this would be to open you menu.js file and wrap the contents in this function call

(function($) {

    // $ is now equal to jq321
    // menu.js stuff

})(jq321);