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

5 posts, 0 answers
  1. Jay
    Jay avatar
    88 posts
    Member since:
    Dec 2011

    Posted 20 Jun 2013 Link to this post

    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
  2.
  3. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    654 posts

    Posted 21 Jun 2013 Link to this post

    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.
  5. Jay
    Jay avatar
    88 posts
    Member since:
    Dec 2011

    Posted 21 Jun 2013 Link to this post

    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!
  7. Sharon
    Sharon avatar
    1 posts
    Member since:
    Aug 2014

    Posted 06 Jan 2016 Link to this post

    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

  8.
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 12 Jan 2016 Link to this post

    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
Back to Top