This is a migrated thread and some comments may be shown as answers.

[Solved] $telerik.$ and jquery-ui: not working together

4 Answers 569 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Jay asked on 20 Jun 2013, 09:07 PM

I am trying to switch our use of jquery over to that bundled with telerik since they are now the same version. However, I'm having a problem getting jquery-ui to work with it. I'm using jquery-ui to create a dialog, and it doesn't appear to work. Expanding the $telerik.$, I don't see a .dialog method on it.

I have the script references in our master page, as

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="rsmMaster" EnablePartialRendering="true" LoadScriptsBeforeUI="true" >

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

</Scripts>

</telerik:RadScriptManager>

then in a user control, I have

<link rel="stylesheet" type="text/css" href="/Styles/jquery-ui-1.9.1.min.css"/>

<script type="text/javascript" src="/Scripts/static/jquery-ui-1.9.1.min.js"></script>

When I view the page source, I see the same order as this, the

<script src=

"/WebResource.axd?d=DuSlCKW6NVW_IvooK_ULRkGrkaQk8B9YO8dMFExK7Zd9u8awk2PNvZljNscyGZmt29aEjTONftL-RFMNd5YH_LVuLwJPS8p7Ny3IB93VcfM1&t=634970873020000000"

type="text/javascript"></script>

is far above the jquery-ui lines.

Any thoughts

4 Answers, 1 is accepted

answered on 21 Jun 2013, 08:56 AM

Hi, Jay.

Even though we bundle jQuery with the RadControl for ASP.NET Ajax, we do not expose it globally to ensure it will not conflict with other versions.

To make it usable by jQuery UI, you just need to expose it e.g.:

window.jQuery = window.$ = $telerik.$;

Make sure you include this snippet before you include jQuery UI.

From that point on, jQuery UI will work with that object and extend it properly. Alternative is to go in the jQ ui scripts and edit the script so it explicitly uses $telerik.$.

Regards,
Ivan Zhekov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 07 Jan 2016, 02:27 AM

Ivan,

I'm actually having a similar problem. I'm using JQueryUI on the same page with some telerik AJAX RADControls.

It literally blows up with JQueryUI's .dialog() is called.

I tried applying your fix above, (window.jQuery = window.$ = $telerik.$;), but it didn't work.

Unhandled exception at line 15422, column 2 in http://localhost:58268/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=radScriptManager_TSM&compress=1&_TSM_CombinedScripts_=;;Telerik.Web.UI,+Version=2015.3.930.45,+Culture=neutral,+PublicKeyToken=121fae78165ba3d4:en-US:cabc43da-04da-4243-ae6b-645a1423200c:ed16cbdc:24ee1bba:874f8ea2:c128760b:19620875:f46195d3:92fe8ea0:fa31b949:4877f69a:490a9d4e:bd8f85e4:cda80b3:2003d0b8:1e771326:88144a7a:2bef5fcc:e06b58fd:6d43f6d9:e330518b:c8618e41:1a73651d:333f8d94:c172ae1e:9cdfc6e7:e4f8f289:86526ba7:58366029:aa288e2d:258f1c72:b7778d6c:78b9daca

0x800a138f - JavaScript runtime error: Unable to get property 'disabled' of undefined or null reference

answered on 12 Jan 2016, 07:04 AM

Hello Sharon,

You can configure the RadScriptManager to use an external jQuery. For example:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.11.1.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager2" EnableEmbeddedjQuery="false">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

function openDialog() {

$("#dialog").dialog();

}

</script>

<telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="openDialog" AutoPostBack="false" Text="Open Dialog" />

<div id="dialog" title="Basic dialog">

<p

>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</

p>

</div>

</form>

</body>

</html>

On a side note I suggest that you use the version of jQuery that is utilized by Telerik UI controls (i.e., version 1.11.1). More information on the matter is available here - http://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#jquery-version-history-in-telerik-ui-controls

Regards,
Danail Vasilev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items