Thursday 11 October 2012

Telerik MVC extensions and JQuery UI - Object doesn't support this property or method - JQuery conflict

I had a problem where I had an MVC project that used the Telerik MVC Grid.

This uses jquery-1.7.1-min.js.

But I also updatd my project folder to include jquery-1.8.2.js elsewhere in order to use JQuery UI's tooltips.

When I ran the project I got a Javascript error:

Object doesn't support this property or method on
$(document).tooltip();
This was because JQuery was referenced twice in the the HTML outputs.

So I then deleted the  jquery-1.7.1-min.js that was present in Telerik's 2012.2.607 folder. However this then caused another problem whereby javascript was complaining that

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'tDropDownList'

This was because Telerik's JQuery was removed.

The solution was to use:
@Scripts.Render("~/bundles/jquery")

at the top of the HTML page and set JQuery(false) on Telerik:

@(Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true)))

This results in JQuery being added at the top of the HTML and prevents Telerik adding another script tag.

No comments:

Post a Comment