RadScriptManager, jQuery.js and jQuery Libraries

[Peter Parsons]

Hi,

I am trying to include a jQuery UI library and am having trouble, I'm guessing, with the load sequence of the scripts.

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <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>

    <script type="text/javascript">
    window.$ = $telerik.$;
    </script>

the above is from my master page, this allows me to use basic jQuery scripts on my page, and is working fine.

However, when I try to add the following scripts to my page, I am getting javascript errors when the page loads.

    <script type="text/javascript" src="/scripts/JQueryUI/jquery.ui.core.js"></script>
    <script type="text/javascript" src="/scripts/JQueryUI/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/scripts/JQueryUI/jquery.ui.tabs.js"></script>

The exact errors depend on how/where I add the scripts to the page, but are basically combinations of either 'Jquery is undefined' or '$ is undefined'.

I have tried adding the scripts to the master page's head, the custom control's RadCodeBlock, I have also tried adding them to the RadScriptManager's script block and straight onto the master page's body after the 'window.$ = $telerik.$;' script. Finally I have also tried adding it to the script manager register startup script in c# on the page load for the master page.

How/when should I add these scripts to the page to make them work?

The only solution I can currently think of is to (re)include the JQuery library to the master page's head tag and to completely give up on using the Telerik built in library. This is a last option as I presume this would require clients downloading the main library twice.

Cesare

[Simon]

Hello Anthony Parsons,

The code in jqueyr.ui.core.js first verifies the existence of jQuery.ui, which produces the error in your case because jQuery does not exist when the script loads.

So you need to set this similarly to setting the $ alias. Additionally you must include the scripts after this assignment because otherwise the script will be unable to find the jQuery object again as it will load earlier.

Finally if you arrange your scripts in this way you will achieve your requirement:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <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>

<script type="text/javascript">
    window.jQuery = window.$ = $telerik.$;
</script>

<script type="text/javascript" src="jQueryUI/jquery.ui.core.js"></script>
<script type="text/javascript" src="jQueryUI/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jQueryUI/jquery.ui.tabs.js"></script>

Kind regards,
Simon
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.