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

[Solved] Using Telerik Jquery with external plugins

5 Answers 286 Views

ScriptManager and StyleSheetManager

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

Massimiliano asked on 11 Feb 2014, 06:31 PM

I'm trying to use a plugin for masked input. The issue I'm facing is: Uncaught ReferenceError: jQuery is not defined
I'm using v. 2013.3.1324

I add the script from a user control that way:

' On control page init

CoreHelpers.AddControlScript(Parent.Page.ClientScript, "admin/jquery.inputmask.bundle.min.js", String.Format("{0}admin/jquery.inputmask.bundle.min.js?v={1}", LinkHelpers.VLink(LinkType.Script), AppSettings.StaticFilesVersion))

' Wich calls this function so not to add duplicate scripts

Public Shared Function AddControlScript(scriptManager As ClientScriptManager, key As String, script As String) As String

Dim returnScript As String = String.Empty

If Not scriptManager.IsClientScriptIncludeRegistered(key) Then

scriptManager.RegisterClientScriptInclude(key, script)

End If

Return returnScript

End Function

But as soon as the resource is loaded I have the "Uncaught ReferenceError: jQuery is not defined" error in Chrome console.
The script starts with "(function ($) {................"

Any hint?
I had no problem so far in using jQuery in local function or scripting but this plugin is giving issue, maybe because it starts with "(function ($) {" ?

Thanks in advance

5 Answers, 1 is accepted

answered on 14 Feb 2014, 10:04 AM

Hello Massimiliano,

In order to use the telerik jQuery, you have to make sure to include your script only after the telerik core scripts are loaded on the page. The other thing is, as you pointed out, that you have to pass $telerik.$ as a parameter to the self invoking function, since the jQuery included in telerik doesn't override the global jQuery variable.

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 UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 14 Feb 2014, 02:41 PM

Hallo Bozhidar! I tried with $telerik.$ but with no luck, maybe because I use scriptManager.RegisterClientScriptInclude(key, script) to include the Jquery script and so this is included before the actual telerik jquery is loaded (in the body).
I'll make some tests including the jquery external plugin AFTER telerik one and then to use $telerik.$
Just for curiosity how could I keep the scriptManager.RegisterClientScriptInclude(key, script) functionality and yet have the telerik jquery loaded before that?
At the moment I have it in my master page inside <body><form> that way:

<telerik:RadScriptManager ID="RadScriptManager1" ClientIDMode="Static" runat="server" EnableEmbeddedjQuery="true" EnableCdn="true" AllowCustomErrorsRedirect="false" EnableScriptGlobalization="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" />

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

</Scripts>

</telerik:RadScriptManager>

Thanks in advance

Ps. I'll report back my testing

answered on 17 Feb 2014, 09:07 AM

Hello Massimiliano,

In order to control when the scripts are rendered, you have to disable the CDN and set the OutputPosition property of the core scripts to Beginning. For example:

<telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" OutputPosition="Beginning" />

This way the core scripts will be loaded before the script registered through RegisterClientScriptInclude.

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 UI for ASP.NET AJAX, subscribe to the blog feed now.