Tuesday, March 10, 2015

Different Versions of jQuery in the Same Page

Another MicroPost. Sometimes there will be requirements to use multiple jQuery versions in the same page. Scenarios like cross browser compatibility, support an old jQuery plugin etc. This can be accomplished by changing the global jQuery variable and using $.noConflict() method. Hope following snippet is self explaining.


<!-- load jQuery 1.11.2 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  var old$ = $.noConflict(true);
</script>

<!-- load jQuery 2.1.3 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
  var new$ = $.noConflict(true);
</script>

<script type="text/javascript">
  // Using jQuery 1.11.2
  console.log(old$.fn.jquery);

  // Using jQuery 2.1.3
  console.log(new$.fn.jquery);
</script>

Use this Plunker to play with this.

No comments:

Post a Comment