Use multiple jQuery version with plugins

Question

i use the AdminLTE Template. This require jQuery Version 3.X

I also use the flotchart jq lib, it require jQuery Version 1.11.3

If I use the $.noConflict(true) function I can use two different jq versions.

But the $ can only handle one jq lib.

How is it possible to use 2 different versions, with plugins that reference on $

My Page: In <head> section:

<!-- jQuery 2.1.4 -->
<script src="{{ asset('bower_components/jquery/dist/jquery.min.js') }}"></script>

At the end of the page:

<!-- jQuery 1.11.3 -->
<script src="{{ asset('/bower_components/jquery_1.11.3/jquery.js') }}"></script>
<script type="text/javascript">
var jQuery_1_11_3 = $.noConflict(true);

<script src="{{ asset('/bower_components/Flot/jquery.flot.js') }}"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{{ asset('/bower_components/Flot/excanvas.min.js') }}"></script><![endif]-->
<script src="{{ asset('/bower_components/Flot/jquery.flot.time.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.label.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.canvas.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.crosshair.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.navigate.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.axislabels.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.stack.js') }}"></script>

I get some errors, but they aren't helpful

No I was right the first time - this is using flotCharts: jsfiddle.net/qnmcahrs You don't need to change the jQuery version at all as it works fine with jQuery 3.x — Rory McCrossan
– Rory McCrossan, Commented May 10, 2017 at 8:14
I will test it with a extension, github.com/markrcote/flot-axislabels/blob/master/… — Philipp Nies
– Philipp Nies, Commented May 10, 2017 at 8:15
@RoryMcCrossan After an updated, everything works fine. Thanks for help :-) — Philipp Nies
– Philipp Nies, Commented May 10, 2017 at 9:13

Yeldar Kurmangaliyev · Accepted Answer · 2017-05-10 08:30:04Z

1

In general, it sounds like a bad idea and you only need to work with different versions of jQuery at once if there are really NO other possibilities and solutions at all. May be, it is even better to stop using outdated flot library.
You can load jQuery multiple times and attach scripts which require specific version after them.

Just check this demo:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
  // jQuery 1 demo
  console.log("I need jQuery 1 and it is actually " + jQuery.fn.jquery);
  console.log("jQuery size() function: " + $("body").size); // exists
</script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.js') }}"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{{ asset('/bower_components/Flot/excanvas.min.js') }}"></script><![endif]-->
<script src="{{ asset('/bower_components/Flot/jquery.flot.time.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.label.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.canvas.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.crosshair.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.navigate.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.axislabels.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.stack.js') }}"></script>
<!-- Other scripts which require jQuery 1 -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  // jQuery 3 demo
  console.log("I need jQuery 3 and it is actually " + jQuery.fn.jquery);
  console.log("jQuery size() function: " + $("body").size); // deprecated and removed
</script>
<!-- Other scripts which require jQuery 3 -->

<!-- 
    Here go your custom scripts which use latest loaded jQuery. 
    Make sure to load the version you use (I hope it is the latest one) 
    in your scripts at last to make sure that jQuery 3 
    is used in all other places by default.
-->

edited May 10, 2017 at 8:30

answered May 10, 2017 at 8:24

Yeldar Kurmangaliyev

34.4k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philipp Nies Over a year ago

I will update all my "old" libs, this take some time. I will call back soon ;)

Philipp Nies Over a year ago

Now I updated all flotchart plugins, and it worked great. Thanks for help

user7980531 · Accepted Answer · 2017-05-10 08:16:11Z

1

You must specify the var right after the $, then the selector will use that Jquery version. Example:

$jQuery_1_11_3('input').val();

answered May 10, 2017 at 8:16

user7980531

Collectives™ on Stack Overflow

Use multiple jQuery version with plugins

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related