Error with loading 2 different versions of JQuery

Question

I am using 2 JQuery versions on my website, but there is a problem with loading both versions at the same time. If one runs, then other one can't run. I am using Date Time picker and High charts. I have already searched for code to handle JQuery conflicts, but I don't understand them. I am new to JQuery.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

These are used for the date time picker.

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

And these is used for the high charts. Please tell me a simple way that I can load both at the same time.

Importing two different versions of jQuery into the same page is a recipe for pain, heartache, and disaster. — Pointy, Dec 23 '13 at 14:33
You can create an alias for each of the versions, check this out: http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page — Dimitar Dimitrov, Dec 23 '13 at 14:33
Have you considered using just the newer jQuery library, loaded first? — Jeromy French, Dec 23 '13 at 14:33
no firstly i was using date time picker and now i want to use high charts in the same page — user3129777, Dec 23 '13 at 14:35
But why do you use an old version of jQuery and jQuery UI for the datetimepicker? Why not use the same one Highcharts uses? — JJJ, Dec 23 '13 at 14:36

score 1 · Answer 1 · answered Dec 23 '13 at 14:38

As far as I know, you don't need to load the JQuery library twice.

//load JQuery Library
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
//load Jquery UI Library
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
//load the code for highcharts
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
//load the css for JQuery UI
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

score 1 · Answer 2 · answered Dec 23 '13 at 14:38

I think this is fairly unwise.

If you have a dependency that won't use a higher version of jquery then that dependency limits you to that particular jquery version.

My advice would be that you can only ever have one jquery instance loaded at a time. You could try noConflict(), but this is likely to cause trouble with any dependent libraries that may not implement this perfectly.

score 0 · Accepted Answer · answered Dec 23 '13 at 14:36

Well this is not tested but you could probably make use of the noConflict and setting them to diffrent shortnames

something like

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> $jq1=jQuery.noConflict (); </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript"> $jq2=jQuery.noConflict (); </script>

Then use the first one as $jq1('whaeverselector')...

score 0 · Answer 4 · answered Dec 23 '13 at 14:39

Yes, it's doable due to jQuery's noconflict mode.

http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- 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>

Then, instead of

  $('#selector').function();

you'd do

 jQuery_1_3_2('#selector').function();

or

jQuery_1_1_3('#selector').function();.

Error with loading 2 different versions of JQuery

4 Answers4