Is there a way to use bootstrap 3.0 plugins with jQuery.noConflict()?

Question

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 no

Answer 1

First Load the Older Version of Jquery.

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

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

Then, use like this.,

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

Answer 2

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.:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load any Bootsrap JS files before calling jQuery.noConflict()  -->
<script src="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 -->
<script src="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.

Answer 3

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

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