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

Q1 2015: Problem using external jQuery instead of embedded version

14 Answers 539 Views

General Discussions

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

Marja asked on 04 Mar 2015, 02:01 AM

I tried to follow the steps mentioned at http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html to use a custom jQuery version instead of the embedded one in the Telerik DLLs.

When I add this script reference to RadScriptManager:

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

and I run my project, I get the following exception:

Assembly 'Telerik.Web.UI, Version=2015.1.225.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4' contains a Web resource with name 'Telerik.Web.UI.Common.Detection.Detection.js', but does not contain an embedded resource with name 'Telerik.Web.UI.Common.Detection.Detection.js'.

But when I run the project without that "detection" script reference, RadScriptManager insists on adding another script-tag with a reference to the same jQuery file as is already referenced/used in the HEAD section of the page.
The generated code looks like this then:

<script src="https://d2i2wahzwrm1n5.cloudfront.net/ajaxz/2015.1.225/Common/Core.js" type="text/javascript"></script>

<script src="https://d2i2wahzwrm1n5.cloudfront.net/ajaxz/2015.1.225/Common/jQueryExternal.js" type="text/javascript"></script>

<script src="https://d2i2wahzwrm1n5.cloudfront.net/ajaxz/2015.1.225/Common/jQueryPlugins.js" type="text/javascript"></script>

<script src="/wsAdmin/jQuery/jquery-1.11.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

(window.jQuery)||document.write('<script type="text/javascript" src="/wsAdmin/jQuery/jquery-1.11.2.min.js"><\/script>');//]]>

</script>

<script src="https://d2i2wahzwrm1n5.cloudfront.net/ajaxz/2015.1.225/Common/Widgets/Draggable.js" type="text/javascript"></script>

A few questions:

Can anyone explain why I get the exception when using the "detection" script reference?
And also why RadScriptManager adds another script-tag for the jQuery?

Thanks in advance for any pointers.

Best regards, Marja

14 Answers, 1 is accepted

answered on 04 Mar 2015, 10:42 AM

Furthermore, the RadScriptManager inserts the non-CDN path in the script-tag, while we have the following in Global.asax:

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With { _

.Path = "/wsAdmin/jQuery/jquery-1.11.2.min.js", _

.DebugPath = "/wsAdmin/jQuery/jquery-1.11.2.js", _

.CdnPath = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js", _

.CdnDebugPath = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js", _

.CdnSupportsSecureConnection = True, _

.LoadSuccessExpression = "window.jQuery"

})

The unexpected/unwanted extra script-tag inserted by RadScriptManager would be less of a problem when at least the given CDN-path was used. As that's the one we're using in the HEAD section of the page.

Best regards, Marja

answered on 04 Mar 2015, 07:08 PM

Hi Marja,

The inclusion of Detection.js is an error in our documentation and we will fix it for the next upload (on Monday).

Below is all you need to enable external jQuery:

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

<head runat="server">

<title runat="server"></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>

<body>

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

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

</form>

</body>

</html>

I have updated your telerik points as a gratitude for pointing this problem to us.

Regards,
Genady Sergeev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 05 Mar 2015, 12:41 AM

Hi Genady,

Thank you for your reply, but regretfully doing only that is not enough.

When I don't alter Global.asax the way I showed before, I get an exception like this:

WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

And with the Global.asax alteration I mentioned before I lose that exception, but then RadScriptManager always inserts the extra script-tag. And it does so using the non-CDN paths.
That causes the jQuery scripts to be referenced/loaded twice.

When I ignore the issue of the 2 jQuery script tags in the page, the application runs fine in a normal http environment.
But once working in a secure https environment, all kinds of other vague problems start to emerge. All having to do with other JavaScript-files not being loaded correctly (or in time).

All these issues vanish immediately when I don't instruct RadScriptManager to use the external jQuery version.

????

answered on 06 Mar 2015, 01:59 PM

UnobtrusiveValidation.zip

Hi Marja,

We are not able to reproduce the problem on our side. What we tried was to add a script resource mapping in the Application_Start event and then disabled the embedded jQuery support.

As a result, only once instance of jQuery was loaded on the page. We did our tests with unobtrusive validation enabled.

I am attaching the test project here for a reference. Can you take a look and see whether it loads double jQuery on your side? If not, we would be interested to see what configuration on your side is causing the failure.

Regards,
Genady Sergeev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 08 Mar 2015, 01:36 PM

Hi Genavy,

In your example project, you don't have a validator on the page.
And indeed, in that situation I don't get a 2nd instance of the jQuery reference either.

Please add a textbox with an associated RequiredFieldValidator to the page, together with a button with CausesValidation="true".
And then try again.

In that situation I do get a 2nd instance of the jQuery reference, and it uses the local path to it and thus not the CDN path indicated by the resource mapping in the Application_Start.

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="UnobtrusiveValidation._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title runat="server"></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>

<body>

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

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

<telerik:RadListBox runat="server">

<Items>

<telerik:RadListBoxItem Text="ListBoxItem1" />

</Items>

</telerik:RadListBox>

<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ControlToValidate="TextBox1" ErrorMessage="Please insert some text" runat="server"></asp:RequiredFieldValidator>

<br />

<asp:Button ID="Button1" CausesValidation="true" runat="server" />

</form>

</body>

</html>

answered on 12 Mar 2015, 02:15 PM

Hello Marja,

This turned out to be a bug in the ASP. NET ScriptManager. In order to resolve it you need to both set EnableCDN=true and CdnSetting-TelerikCdn=Enabled on the RadScriptManager. Example:

<telerik:RadScriptManager runat="server" EnableCdn="true" CdnSettings-TelerikCdn="Enabled">

</telerik:RadScriptManager>

<telerik:RadListBox runat="server" ID="ListBox1">

<Items>

<telerik:RadListBoxItem Text="Text1" />

</Items>

</telerik:RadListBox>

<asp:RequiredFieldValidator runat="server" ControlToValidate="ListBox1" ErrorMessage="Foo"></asp:RequiredFieldValidator>

</form>

This will solve the problem with the double registration by instructing the base ScriptManager not to load the local path script because the CDN is enabled.

Regards,
Genady Sergeev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 12 Mar 2015, 04:49 PM

Thanks Genavy, but I'm not quite there yet.

RadScriptManager (and also the regular ScriptManager) put there SCRIPT-tags in the BODY of the page, but that's too late for me.
I need jQuery to be loaded as the first thing, before any orther JavaScript, because otherwise other scripts don't work.
Therefore, I already have my own jQuery reference in the HEAD section of the page.

Using the CDN settings you suggested on RadScriptManager, the 2nd jQuery reference is still generated ... be it now using the CDN paths:

<script src="http://aspnet-scripts.telerikstatic.com/ajaxz/2015.1.225/Common/Core.js" type="text/javascript"></script>

<script src="http://aspnet-scripts.telerikstatic.com/ajaxz/2015.1.225/Common/jQueryExternal.js" type="text/javascript"></script>

<script src="http://aspnet-scripts.telerikstatic.com/ajaxz/2015.1.225/Common/jQueryPlugins.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

(window.jQuery)||document.write('<script type="text/javascript" src="jQuery/jquery-1.11.2.js"><\/script>');//]]>

</script>

<script src="http://aspnet-scripts.telerikstatic.com/ajaxz/2015.1.225/Common/Widgets/Draggable.js" type="text/javascript"></script>

<script src="http://aspnet-scripts.telerikstatic.com/ajaxz/2015.1.225/Common/Widgets/Resizable.js" type="text/javascript"></script>

But I don't want a 2nd reference at all !!!

Because as soon as I have a 2nd jQuery reference on the page, thus causing jQuery to be loaded twice, I get other JavaScript errors stating that some jQuery plugin functions we're using are undefined.
Those functions aren't undefined... they are loaded in the HEAD section of the page, right after the 1st jQuery reference. And it al works fine if we only have jQuery loaded in the HEAD section of the page.

Any idea how to go about this?

answered on 12 Mar 2015, 05:27 PM

Inspired by this blog post, I've now also tried using the PreApplicationStartMethod attribute to try and force (Rad)ScriptManager to use MY jquery scripts instead of generating its own.

<Assembly: System.Web.PreApplicationStartMethod(GetType(WebwareNET.wsScriptReferenceInitialiser), "InitialiseScripts")>

Public NotInheritable Class wsScriptReferenceInitialiser

Public Shared Sub InitialiseScripts()

' WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'

' see http://blogs.msdn.com/b/pranav_rastogi/archive/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms.aspx

Dim l_sJQueryVersion As String = wsUtils.JQueryInstalledVersion

Dim l_sJQueryPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-" & l_sJQueryVersion & ".min.js")

Dim l_sJQueryDebugPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-" & l_sJQueryVersion & ".js")

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With { _

.Path = l_sJQueryPath, _

.DebugPath = l_sJQueryDebugPath, _

.CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.min.js", _

.CdnDebugPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.js", _

.CdnSupportsSecureConnection = True, _

.LoadSuccessExpression = "window.jQuery"

})

Dim l_sJQueryUIVersion As String = wsUtils.JQueryUIInstalledVersion

Dim l_sJQueryUIPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-ui-" & l_sJQueryUIVersion & ".min.js")

Dim l_sJQueryUIDebugPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-ui-" & l_sJQueryUIVersion & ".js")

ScriptManager.ScriptResourceMapping.AddDefinition("jquery.ui.combined", New ScriptResourceDefinition() With { _

.Path = l_sJQueryUIPath, _

.DebugPath = l_sJQueryUIDebugPath, _

.CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.min.js", _

.CdnDebugPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.js", _

.CdnSupportsSecureConnection = True

})

End Sub

End Class

The above application initialisation runs fine, prior to Global.asax. I can see that when debugging.
But the 2nd jQuery reference within the BODY section is still inserted into the page by (Rad)ScriptManager.

What am I missing?

answered on 12 Mar 2015, 05:36 PM

Additionally, I've now also explicitly added these script references by name to RadScriptManager, like this:

<telerik:RadScriptManager ID="RadScriptManager1" EnableEmbeddedjQuery="false" EnableCdn="true" CdnSettings-TelerikCdn="Enabled" runat="server">

<Scripts>

<asp:ScriptReference Name="jquery" />

<asp:ScriptReference Name="jquery.ui.combined" />

<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>

Regretfully, no change. :-(

answered on 16 Mar 2015, 09:02 AM

Hello Marja,

Okay, let me sum up. You basically need to load the script in the head tag. Why is this? If you use handlers like $(document).ready(function() { }) this should ease any timing issues that one might be facing.

Additionally RadScriptManager can be configured to output the jQuery script before all other Telerik scripts. The below example shows how do to it (we assume that Global.asax) stays unchanged.

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

<head runat="server">

<title runat="server"></title>

</head>

<body>

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

<telerik:RadScriptManager runat="server" EnableCdn="true" CdnSettings-TelerikCdn="Enabled" EnableEmbeddedjQuery="false">

<Scripts>

<telerik:RadScriptReference Name="jquery" OutputPosition="Beginning" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadListBox runat="server" ID="ListBox1">

<Items>

<telerik:RadListBoxItem Text="Text1" />

</Items>

</telerik:RadListBox>

<asp:RequiredFieldValidator runat="server" ControlToValidate="ListBox1" ErrorMessage="Foo"></asp:RequiredFieldValidator>

</form>

</body>

</html>

As you can see, the above approach will load only one instance of jQuery right before the rest of the Telerik scripts.

Does this sound more feasible with respect to your scenario?

Unfortunately we are not aware of other approach to force jQuery to load in the Head while using ScriptResourceDefinition. The only way to do it seems to disable unobtrusive validation, remove ScriptResourceDefinition and manually load jQuery in the head.

Regards,
Genady Sergeev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 26 Aug 2020, 11:41 AM

Blast from the past. Sorry. Legacy code.

So then does an alias need to be established e.g.

var $=$telerik.$;

var $xjq = jQuery; permitting the use of $telerik stuff where appropriate and $xjq where a feature of the external is needed?

How does one ensure that $ uses your jQuery and $xjq refers to the external jQuery link?

Is it also true that the dynamic switch between debug (jquery-1.11.2.js) and production (jquery-1.11.2.min.js) indicated in the second addendum to the user's question is no longer possible? That was a neat trick...

answered on 27 Aug 2020, 11:13 AM

Hello,

The embedded jQuery is scoped to the $telerik.$ variable.

https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#using-the-jquery-brought-by-telerik
After including the jQuery file you can start using it. There is a trick though - the jQuery object is available as $telerik.$ instead of the default $ or jQuery aliases. This is so to avoid compatibility issues with applications that already use (other versions of)jQuery. For more info you can check the documentation of the noConflict method.

That means if you load an external jQuery, you can use it via window.$ while the Telerik controls will use the embedded jQuery internally and no conflict will arise.

If you are not loading an external jQuery on the page and want to use simply $ instead of $telerik.$, can add the following entries in the ScriptManager which will expose the $telerik.$ into the window.$ variable:

https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#using-the-jquery-brought-by-telerik

<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" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
 
Or simply use 
// this will assign the embedded jQuery to the global $ ONLY when $ is undefined
window.$ = window.$ || $telerik.$;

Regards,
Peter Milchev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Q1 2015: Problem using external jQuery instead of embedded version

14 Answers, 1 is accepted