Is it possible to use infragistics.js library (IgniteUI controls) with jQuery.noConflict() turned on?
I am working on a Web Forms application that adds an old version of jQuery (1.4.2) and some other Javascript code through WebResources.
Since this other JavaScript code depends on jQuery's $ default alias, I cannot use noConflict() with the old jQuery library (do not have control over this WebResource generated JavaScript code).
The problem is that infragistics.js is breaking with Error below, I believe due to conflict with this old jQuery version:
"Error: Unable to get property 'util' of undefined or null reference" (see Capture.JPG attached for detailed location of error).
I am using Infragistics (IgniteUI) v2012.2.
These are my references on the page:
<link href="stylesheets/infragistics.theme.css" rel="stylesheet" />
<link href="stylesheets/infragistics.css" rel="stylesheet" />
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.min.js"></script> //This is v1.9.1, where I want to turn noConflict() on for Infragistics.
<script src="js/jquery-ui.min.js"></script>
<script src="js/infragistics.js"></script>
Hello tmattosr,
We do support jQuery.noConflict(). However in Ignite UI 12.2 there is a bug with the support which was fixed recently. Unfortunately the fix will not make it into the 12.2, because we no longer support it.
You have 2 options:
Option 1: You can upgrade to 13.1 or 13.2
Option 2: If you have the Ignite UI source code you can modify the infragistics.util.js file and wrap its contents in a closure like this:
(function ($) {
// infragistics.util.js contents here
})(jQuery);
The same technique should be applied to all localization files which are located in "js\modules\i18n\regional". Since you're using infragistics.js (which is the combined file) you can apply those changes there or you should reference the individual Ignite UI files in your page instead.
Hope this helps,Martin PavlovInfragistics, Inc.
Thanks,
I upgraded infragistics.js to 13.2 and that fixed the original error. I was able to render the igGrid using a remote datasource (url) with no errors:
var ds = new $.ig.DataSource({
type:"remoteUrl",
dataSource: url,
responseDataType:"jsonp",
responseContentType:"application/json; charset=utf-8"
});
$("#grid").igGrid({ dataSource: ds });
After that I added "paging" feature to the igGrid definition:
$("#grid").igGrid({ dataSource: ds,
features: [{
name:'Paging',
pageCountLimit: 5,
pageSize: 10
} ]
And now I get error below:
Error: Unable to get property '_injectGrid' of undefined or null reference
Infragistics.js code portion: this.element.data(widget)._injectGrid(this)
Could you advise how to fix this?
Thanks again