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

$telerik.$ and jquery-ui: not working together

4 Answers 440 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
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

Sort by
0
Ivan Zhekov
Telerik team
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.
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 21 Jun 2013, 01:58 PM
Okay, Ivan, thanks. Seems like that has got it working; I can invoke the jquery-ui stuff now. I'm still having another issue so I might be back but it seems like it's more on my end now. Thanks again!
0
Sharon
Top achievements
Rank 1
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

0
Danail Vasilev
Telerik team
answered on 12 Jan 2016, 07:04 AM
Hello Sharon,

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

<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
Tags
General Discussions
Asked by
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Ivan Zhekov
Telerik team
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Sharon
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or