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

Scripts errors with RadScriptManager and jquery

23 Answers 800 Views

ScriptManager and StyleSheetManager

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

bemana asked on 22 Oct 2013, 01:18 AM

I'm getting the following script errors on this very simple example site.

Line: 6
Error: 'jQuery' is undefined

Line: 8
Error: '$telerik' is undefined

The ScriptManager is not loading my jquery reference. Afterward, the embedded jquery 1.9.1 is loaded (even though i have EnableEmbeddedjQuery set to false) and it tries to assign it to $telerik, which isn't defined.

default.aspx

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

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableCdn="true" EnableEmbeddedjQuery="false" >

<Scripts>

<telerik:RadScriptReference Name="jquery" />

<telerik:RadScriptReference Name="jquery-ui" />

</Scripts>

</telerik:RadScriptManager>

<div>

</div>

<asp:Login ID="Login1" runat="server"></asp:Login>

</form>

</body>

</html>

web.config

<?xml version="1.0"?>

<configuration>

<appSettings>

<add key="Telerik.Skin" value="Silk"/>

<add key="Telerik.ScriptManager.TelerikCdn" value="Enabled"/>

<add key="Telerik.StyleSheetManager.TelerikCdn" value="Enabled"/>

</appSettings>

<system.web>

<compilation debug="true" targetFramework="4.5"/>

<httpRuntime targetFramework="4.5"/>

<pages>

<controls>

<add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>

</controls>

</pages>

<httpHandlers>

<add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false"/>

<add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>

<add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>

<add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false"/>

<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>

</httpHandlers>

<httpModules>

<add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule"/>

<add name="RadCompression" type="Telerik.Web.UI.RadCompression"/>

</httpModules>

</system.web>

<system.webServer>

<validation validateIntegratedModeConfiguration="false"/>

<modules runAllManagedModulesForAllRequests="true">

<remove name="RadUploadModule"/>

<add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" preCondition="integratedMode"/>

<remove name="RadCompression"/>

<add name="RadCompression" type="Telerik.Web.UI.RadCompression" preCondition="integratedMode"/>

</modules>

<handlers>

<remove name="ChartImage_axd"/>

<add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode"/>

<remove name="Telerik_Web_UI_SpellCheckHandler_axd"/>

<add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode"/>

<remove name="Telerik_Web_UI_DialogHandler_aspx"/>

<add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode"/>

<remove name="Telerik_RadUploadProgressHandler_ashx"/>

<add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode"/>

<remove name="Telerik_Web_UI_WebResource_axd"/>

<add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>

</handlers>

</system.webServer>

</configuration>

Global.asax

<%@ Application Language="C#" %>

<script runat="server">

void Application_Start(object sender, EventArgs e)

{

// Code that runs on application startup

string jqueryversion = "1.10.2";

ScriptManager.ScriptResourceMapping.AddDefinition("jquery",

new ScriptResourceDefinition

{

CdnSupportsSecureConnection = true,

Path = "~/javascript/jquery-" + jqueryversion + ".min.js",

DebugPath = "~/javascript/jquery-" + jqueryversion + ".min.js",

CdnPath = "//ajax.aspnetcdn.com/ajax/jquery/jquery-" + jqueryversion + ".min.js",

CdnDebugPath = "//ajax.aspnetcdn.com/ajax/jquery/jquery-" + jqueryversion + ".js"

});

string jqueryuiversion = "1.9.2";

ScriptManager.ScriptResourceMapping.AddDefinition("jquery-ui",

new ScriptResourceDefinition

{

CdnSupportsSecureConnection = true,

Path = "~/javascript/jquery-ui-" + jqueryuiversion + ".min.js",

DebugPath = "~/javascript/jquery-ui-" + jqueryuiversion + ".min.js",

CdnPath = "//ajax.aspnetcdn.com/ajax/jquery.ui/" + jqueryuiversion + "/jquery-ui.min.js",

CdnDebugPath = "//ajax.aspnetcdn.com/ajax/jquery.ui/" + jqueryuiversion + "/jquery-ui.js"

});

}

void Application_End(object sender, EventArgs e)

{

// Code that runs on application shutdown

}

void Application_Error(object sender, EventArgs e)

{

// Code that runs when an unhandled error occurs

}

void Session_Start(object sender, EventArgs e)

{

// Code that runs when a new session is started

}

void Session_End(object sender, EventArgs e)

{

// Code that runs when a session ends.

// Note: The Session_End event is raised only when the sessionstate mode

// is set to InProc in the Web.config file. If session mode is set to StateServer

// or SQLServer, the event is not raised.

}

</script>

I can't seem to solve this RadScriptManager black box. Help!

23 Answers, 1 is accepted

answered on 23 Oct 2013, 01:05 AM

I'm still working on this problem.

It seems like Telerik is overriding the jquery ScriptResourceMapping. Inside Application_Start and Session_Start jquery is my definition (var def = ScriptManager.ScriptResourceMapping.GetDefinition("jquery"); ). If I check the definition in default.aspx.cs in Page_Load, the definition has changed to the Telerik jquery ( ResourceAssembly: {Telerik.Web.UI, Version=2013.3.1015.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4 ; ResourceName: "Telerik.Web.UI.Common.jQuery.js" )

This also seem to be effected by the ValidationSettings:UnobtrusiveValidationMode setting. If I set it to None (<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />), then the ScriptResourceMapping is still overridden but the RadScriptManager doesn't render out the jquery at all. This causes a bunch of errors since jquery is missing.

Since the example code pasted above I have tried many many things. I'm currently trying to get it to work with AspNet.ScriptManager.jQuery, Microsoft.ScriptManager.MSAjax, Microsoft.ScriptManager.WebForms and System.Web.Optimization. This allows for bundling and external framework js, which helps me better see what is getting loaded instead of all these annoying ScriptResource files. Still no luck! Here is my scriptmanger now:

<telerik:RadScriptManager runat="server" EnableCdn="true" EnableEmbeddedjQuery="false">

<Scripts>

<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>

<%--Framework scripts--%>

<asp:ScriptReference Name="MsAjaxBundle" />

<asp:ScriptReference Name="jquery" />

<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />

<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />

<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />

<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />

<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />

<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />

<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />

<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />

<asp:ScriptReference Name="WebFormsBundle" />

<%--Site scripts--%>

</Scripts>

</telerik:RadScriptManager>

Is no one else seeing this problem? I've already lost so much time on this, please help!

answered on 24 Oct 2013, 07:09 AM

Hi Brandon,

As a workaround you can map your jQuery under a different name (for instance userjQuery). To do so you have to modify your Global.asax file in the following statement:



ScriptManager.ScriptResourceMapping.AddDefinition("jquery", ...

should become:

ScriptManager.ScriptResourceMapping.AddDefinition("userjQuery", ...

Then you have to change the definition of the ScriptReference in the RadScriptManager:

<asp:ScriptReference Name="jquery" />

should become:

<asp:ScriptReference Name="userjQuery" />

Regards,
Bozhidar
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 24 Oct 2013, 04:36 PM

That does allow me to load my jquery and here's the result:

<script src="http://ajax.aspnetcdn.com/ajax/4.5/6/MsAjaxBundle.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

(window.Sys)||document.write('<script type="text/javascript" src="/bundles/MsAjaxJs?v=_Onj24X0Yu7cK2nh78YBmVwMlQTGcakS5HZSOI_a6SM1"><\/script>');//]]>

</script>

<script type="text/javascript">

//<![CDATA[

if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');

//]]>

</script>

// only works if ScriptResourceMapping is NOT called "jquery"

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

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

</script>

// jquery should be loaded before WebFormsBundle.js as this JS tries to use jquery

<script src="http://ajax.aspnetcdn.com/ajax/4.5/6/WebFormsBundle.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

(window.WebForm_PostBackOptions)||document.write('<script type="text/javascript" src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01"><\/script>');//]]>

</script>

// Telerik jquery 1.9.1 (don't want this)

<script src=

"/ScriptResource.axd?d=mbGZm65DzNC0tMTq0ElbccEJwn4b8IFWXa-EcF8tTR1v14yzLWdSyx_KTxuKfA1DWDKDEtpeDzXfBFIkF4kadE1FSGjpidnQczlNeO_A4MjwIgkKZsoBobdqZyTM0PVFscOctCxFQaTYAP-zeoTUCw2&t=b435830"

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

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

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

etc...

But the RadScriptManager loads jquery again (the ScriptResource.axd), even with EnableEmbeddedjQuery="false". This replaces 1.10.2 with 1.9.1.

EnableEmbeddedjQuery seems to be ignored if I have ValidationSettings:UnobtrusiveValidationMode = WebForms. If ValidationSettings:UnobtrusiveValidationMode is None, then RadScriptManager does not load it's jquery. Problem is I want UnobtrusiveValidationMode on.

I guess my only option is to accept the double load of query and just use version 1.9.1.

answered on 29 Oct 2013, 11:26 AM

WebApplication4.zip

Hi Brandon,

I tried to reproduce this issue, but alas I wasn't able to. I've attached the sample project I used to test the scenario. Could you run it on your end to see if it works correctly? Please make sure that you are using the official Q3 2013 version of our controls (rather than the BETA release), as well as clear your browser cache before each run.

Regards,
Bozhidar
Telerik

Accepted

answered on 30 Oct 2013, 09:41 AM

WebApplication4.zip

Hi Andrew,

Thank you for the clarification.

I was able to reproduce the issue. It is now resolved and available in yesterday's internal build. I've also attached the modified page. One thing to note is that I've disabled the CDN support (because it only works with official versions) and I've disabled Script Combining.

Our ServicePack which will also contain the fix will come out on the 13th of November.

Regards,
Bozhidar
Telerik

answered on 15 Nov 2013, 12:07 AM

I have installed the latest version.

I would like Telerik's controls to use the version of jQuery you include (1.9.2, sadly). I would also like the latest version of jQuery for my own use (1.10.2).

So it used to be as simple as setting "EnableEmbeddedjQuery" to true, and adding a <ScriptReference> tag to "jquery".

This no longer works. I get "jQuery is not defined".

Now then, I can set EnableEmbeddedjQuery to false, but then your controls will use the 1.10.2 version of jQuery, and really I don't want to go through all of our rather large web application testing every bit of your JavaScript functionality to see if it works properly.

So, what do I have to do so that your version of jQuery is properly loaded, and my version of jQuery is properly loaded?

answered on 19 Nov 2013, 07:33 AM

Temp.zip

Hi Kwang,

I tested the case with a simple page using the 2013.3.1114 version of the controls, and everything seems to be working. Could you try the page on your end and confirm that? Or if I missed some setting or anything else in the sample, please specify what needs to be changed in order to reproduce the issue.

Regards,
Bozhidar
Telerik

answered on 02 Dec 2013, 05:25 PM

PMJI : I came here today looking for info on this exact issue. I'm running 2013.3.1114 with stock JS code, nothing near as complex as the OP:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

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

</asp:ScriptReference>

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

</asp:ScriptReference>

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

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

Errors:

Javascript Intellisense Message: Telerik.Web.UI.Common.jQuery-vsdoc.js:Telerik.Web.UI(2337:23) : '_$' is undefined
Javascript Intellisense Message: Telerik.Web.UI.Common.jQuery-vsdoc.js:Telerik.Web.UI(2341:28) : '_jQuery' is undefined

Changing the order of the references does not seem to matter.

I'm getting strange anomalies in event handling in my code and am now wondering if this is related. ( It can't possibly be MY code that's wrong... ;) )

answered on 04 Dec 2013, 08:18 AM

Hi Tony,

Please preview the following help article, which explains in detail how to set up the ScriptManager properly in order to enable jQuery intellisense:
http://www.telerik.com/help/aspnet-ajax/introduction-jquery-intellisense.html

If the article doesn't help you resolve your issue, could you share some more details about your setup. For instance what version of VisualStudio you are using? Does the issue reproduce only with the 2013.3.1114 version, or with previous versions as well? Does the issue reproduce on a blank page with only the ScriptManager declared, or is it specific to some custom page?

Regards,
Bozhidar
Telerik

answered on 08 Mar 2016, 08:38 PM

Hello. I'm trying to get a page in our app to utilize a more recent version of jQuery, but am getting the exact same error outlined in this thread. We're running version 2013.3.1114.40 of the ASP.NET Ajax controls, and unfortunately, due to breaking changes in the Telerik toolset, we are unable to upgrade any further.

This has become a HUGE issue for us and is preventing us from utilizing the Telerik controls on any new development for this app, but unfortunately, we have used so many of the controls throughout the application, that it would be a tremendous undertaking to make the necessary changes to use the latest tools from Telerik.

I need to add a new page to the application that will require the use of jQuery 2.0+, but cannot seem to get past the error "JavaScript runtime error: 'jQuery' is undefined" on loading the page. The Telerik person 'Bozhidar' mentions that this was a known error with this specific version and that a service pack was released that fixes this. Can you please point me to that service pack along with instructions for applying it?

Thanks,

Charlie

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

Scripts errors with RadScriptManager and jquery

23 Answers, 1 is accepted