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
2 answers
solution1
1 2017-05-10 08:16:11
You must specify the var right after the $ , then the selector will use that Jquery version. Example:
$jQuery_1_11_3('input').val();
solution2
1 ACCPTED 2017-05-10 08:24:13
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. -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.