4

The current jQuery version of the Kendo UI (Q3 2012) is 1.8.2.

I want to use this library on an existing site. The site already uses jQuery but with version 1.5.0 1.4.4. Upgrading this version to 1.8.2 is not an option because it breaks entire pages some components on some pages.

Can the two of them function simultaneously on the same site/page?

The Telerik.ASP.NET.Ajax used a proxy for jQuery that ensured that their controls always used the right jQuery library:

$telerik = $;

Does KendoUI have something similar?

Lucian
  • 3,981
  • 5
  • 30
  • 34
  • *"because it breaks entire pages"* what causes it to break entire pages? there are only a few very small differences between 1.5 and 1.8.2 in terms of syntax. Primarily the .attr() vs .prop() situation, but even that's a very small difference and is unlikely to cause issues. – Kevin B Nov 28 '12 at 15:32
  • I was not aware of the fact that there are not so many differences between these two versions (I've got reports regarding these malfunctions from other developers, I'll further investigate). But the issue remains... – Lucian Nov 28 '12 at 15:37
  • Please, take a look into [this](http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page) related answer on using two versions of jquery in the same page. – OnaBai Nov 28 '12 at 15:37
  • @EmilianoBartolome Thanks, normally I would setup 1.8.2 for KendoUI like this: $kendo.$ = $.noConflict(true); just before loading the 1.5.0. version. But $kendo doesn't wire up anything in the Kendo UI library :( – Lucian Nov 28 '12 at 15:48

1 Answers1

5

You should be able to just do this:

<script src="jquery-1.5.0.min.js"></script>
<!-- plugins for 1.5.0 first... -->
<script src="jqueryui.min.js"></script>
<script src="jquery.hoverintent.min.js"></script>
<!-- then your code -->
<script src="main.js"></script>

where main.js contains:

var $jqueryold = $.noConflict(true);
(function($){
    // do stuff with $
    $(document).ready(function(){
        // ...
    });
})($jqueryold);

You could also skip the immediately executing function if all of your code goes inside a document ready:

var $jqueryold = $.noConflict(true);
$jqueryold(document).ready(function($){
    // do stuff with $
    $("#tabs").tabs();
});

However the ideal solution would be to update the old code to work with the new version of jQuery.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • Thanks, I guess I'll try this solution and see if it plays nicely with KendoUI. I see a kind of side-effect though, even if it probably won't be a problem in my case. If I continue to load jquery-1.8.2.min.js after the main.js I'll loose the references to the previously loaded plugins: $("div").hoverIntent() won't work probably, but $jqueryold.hoverIntent() should do; I just need to keep that in mind... :) – Lucian Nov 28 '12 at 16:40
  • @Lucian Right, that was the point of the `(function($){ ... })($jqueryold)`, it allows you to use `$` rather than `$jqueryold` inside of that anonymous function. – Kevin B Nov 28 '12 at 16:42
  • related to the entire pages thing, it seems that only some custom controls suffer from changing to 1.8.2, and the 1.5.0 version is in fact 1.4.4... sorry for the confusion – Lucian Nov 28 '12 at 16:46
  • still only a few changes, where you really run into compatibility problems is jQuery 1.3 and 1.2 – Kevin B Nov 28 '12 at 16:48
  • 1
    After loading jquery 1.8.2 I've added var j182 = $.noConflict(true); then I've modified the kendo library to use the j182 variable instead of jQuery: ;(function($, undefined) { /*kedo ui code */})(j182); – Lucian Dec 06 '12 at 08:04
  • In my case, I was getting an error because I was calling $.noConflict() instead of $.noConflict(true). – RMorrisey Dec 17 '15 at 18:32