Is There A Way To Use Bootstrap 3.0 Plugins With Jquery.noconflict()?

We are currently loading 2 different versions of jQuery on our page, 1.4.2 and 1.10.1. The $ and window.jQuery objects are currently pointing to 1.4.2. We are using noConflict()

Solution 1:

If you load the bootstrap JS straight after loading jQuery version 1.10.1 and then put jQuery into no conflict mode, it should work.

e.g.:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- Load any Bootsrap JS files before calling jQuery.noConflict()  --><scriptsrc="bootstrap.js"></script><script>// Put jQuery 1.10.2 into noConflict mode.var $jq1 = jQuery.noConflict(true);
</script><!-- This can be before or after the above --><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jQuery.noConflict(true) will reassign both $ and jQuery to their previous values so it doesn't matter if version 1.4.2 is loaded first or not.

It does mean your users will be downloading jQuery twice though and you will need to remember if to use $jq1 or $ when doing anything with jQuery.

Solution 2:

I liked the explanation that the user "ajpiano" provided at https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:

<scriptsrc='jquery-1.3.2.js'></script><script>var jq132 = jQuery.noConflict();
</script><scriptsrc='jquery-1.4.2.js'></script><script>var jq142 = jQuery.noConflict();
</script>

Solution 3:

First Load the Older Version of Jquery.

Then your Boostrap js,css everthing goes here. Finally add this.,

<scripttype="text/javascript">var $versionNumberJ1 = jQuery.noConflict(true);
</script>

Then, use like this.,

<script>
  $versionNumberJ1 ( function() {
    $versionNumberJ1 ( "#tabsModal" ).tabs();
  } );
  </script>