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

Using Telerik Jquery with external plugins

5 Answers 197 Views
ScriptManager and StyleSheetManager
This is a migrated thread and some comments may be shown as answers.
Massimiliano
Top achievements
Rank 1
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

Sort by
0
Massimiliano
Top achievements
Rank 1
answered on 11 Feb 2014, 06:39 PM
I've notice that each main function in that plugin starts and ends with "(function ($) { ....... })(jQuery);"
I tried changing the final (jQuery); to ($telerik.$); but this didn't solve the error just become "Uncaught ReferenceError: $telerik is not defined"
0
Bozhidar
Telerik team
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.
0
Massimiliano
Top achievements
Rank 1
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
0
Bozhidar
Telerik team
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.
0
Massimiliano
Top achievements
Rank 1
answered on 17 Feb 2014, 11:50 AM
Thank you Bozhidar much appreciated! It seems I owe you a cofee lately... :)
Tags
ScriptManager and StyleSheetManager
Asked by
Massimiliano
Top achievements
Rank 1
Answers by
Massimiliano
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or