CODEWITHSUNDEEP
jquery
Apelavin
Apelavin

Reputation: 31

How to resolve conflict between multiple versions of jquery?

I realize there are already various answers out there to questions about using multiple jquery versions on a page, but I have not been able to figure out how to apply them.

On my page I have two .js files - one for operating a collapsible menu, and the second for a thickbox gallery. The collapsible menu stopped working when I added the gallery. When I tried to use the no conflict solution from the link below, the menu worked but the gallery images would no longer load.

http://api.jquery.com/jQuery.noConflict/

Any ideas of what I'm doing wrong? Do I need to add things to both the .html file and the .js files?

code:

<script type="text/javascript" src="../../01 Main/includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../../01 Main/includes/main.js"></script>
<script type="text/javascript">
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
</script>

<script type="text/javascript" src="../scripts/jquery-latest.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<script type="text/javascript">
var $log = $( "#log" );

$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );

jq16min = jQuery.noConflict(true);

$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jqlatest): " + jqlatest.fn.jquery + "<br>" );
</script>

also tried:

<script type="text/javascript" src="../../01 Main/includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../../01 Main/includes/main.js"></script>
<script type="text/javascript">
var jQuery_1_6_min = $.noConflict(true);
</script>

<script type="text/javascript" src="../scripts/jquery-latest.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<script type="text/javascript">
var jQuery_latest = $.noConflict(true);
</script>

Upvotes: 2

Views: 30881

Answers (2)

Mortalus
Mortalus

Reputation: 10712

it is a possible duplicate to : Can I use multiple versions of jQuery on the same page?

ins short his answer:

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Had to go through the same thing :)

Upvotes: 3

Brad
Brad

Reputation: 6342

it doesn't seem smart at all to use multiple versions of jquery but if you must, you could assign one of the versions to another global variable ie link to the first versions 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
window._$ = jQuery;

then load the next version; 

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

Upvotes: 4

Related Questions