Bootstrap datetimepicker with multiple versions of jQuery

Question

The project I'm working on has several version of jQuery being used. I am including the bootstrap-datetimepicker module, and it seems to be automatically associating itself with one of the older versions of jQuery, and I'm not sure why. This is what I have

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>

<script src="https://code.jquery.com/jquery-1.8.2.min.js" integrity="sha256-9VTS8JJyxvcUR+v+RTLTsd0ZWbzmafmlzMmeZO9RFyk=" crossorigin="anonymous"></script>

<script type='text/javascript'>window.jq182=$.noConflict();</script>

If I try to use $("#something").highcharts() I get

$(...).highcharts is not a function(…)

But if I use jq182("#something").highcharts() it works. Why is that? I would assume that it'd associate itself with the current version.

Answer 1

If I try to use $("#something").highcharts() I get $(...).highcharts is not a function(…), but if I use jq182("#something").highcharts() it works. Why is that?

It's up to the order of jQuery libraries you have:

including first the jQuery V2.2.3 and after the version V1.8.2 the $ sign is assigned to the V2.2.3 instead of the other version. So, if your highcharts library is included after the two jquery libraries you have:

$(function () {
  $("#something").highcharts();
});

where, the document ready is a jQuery V2.2.3 function but your highcharts has been created with the version V1.8.2.

You may test by yourself this simply adding a console log message of the simbol $ when you are in the document ready and when you are inside the highcharts function.

To avoid this you may:

• use noConflict
• include highcharts before including the jQuery V1.8.2
• instead of using the symbol $ you may use directly the word jQuery

As you said this is a confused way to use the libraries.

From Highcharts source code:

if (win.jQuery) {

  win.jQuery.fn.highcharts = function() { 

in order to see the version of the jQuery library used according to the order you used.