jQuery noConflict, or what?

Question

I am a student and don't have much background in the code development field. I just have my website running and want to put jetmenu under my template (that's it!).

Here's the jetmenu

http://codecanyon.net/item/jet-responsive-megamenu/5719593

But once I put under the template, it's working only the parent menu, while the submenu itself won't work at all. I tried to open firebug and it said the "!@#@!@# is not a function"

Browse the web, and found the problem. That is, the template is using 2 library of jQuery in different version. Trying to implement some techie trick in noConflict but always no luck.

Here's the code.

   <meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
    sQuery = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
    jQuery(document).ready(function() {
      jQuery().jetmenu();
    });
</script>
<script src="{$baseurl}/js/jetmenu.js"></script>
<script src="{$baseurl}/js/jquery.customSelect.js"></script>

I thought first I can refer like "xxQuery = jQuery.noConflict(true)" but if it needs to edit the whole the jquery code using the library (replace the $ with xxjQuery) will waste of time.

Just one side note: having two jQuery versions in one page is just an awful idea for development. Whoever did that, was terribly wrong about something... — Miloš Đakonović, Mar 27 '16 at 19:40

score 0 · Accepted Answer · edited May 23 '17 at 10:28

I guess you could do something like that:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
    var jq191 = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
    var jq132 = jQuery.noConflict(true);
</script>

<script>

    jq191(document).ready(function() {

       // use the newer version to load the script
        jq191.getScript( "{$baseurl}/js/jetmenu.js" )
          .done(function( script, textStatus ) {
            console.log( textStatus );

            // locally override the $() to use the older version of jQuery
            var $ = jq132;

            // Use the loaded script
            $.jetmenu();

          })
          .fail(function( jqxhr, settings, exception ) {
            console.error( "Triggered ajaxError handler." );
          });

        // use the newer one from now on
        $ = jq191;

    }); // ready

</script>

Also, you might find these solutions useful: Can I use multiple versions of jQuery on the same page?

So @dekkard , the case is there's another important script built-in from template that using sQuery, and that's why whenever I done upload the one you gave (with edit in some part ) But the problem isn't fixed yet. In firebug console now I saw "$ is not a function" in many other script file. Thanks for great response anyway! — gijoe, Mar 25 '16 at 16:22

jQuery noConflict, or what?

1 Answers1