Using Telerik Jquery with external plugins

6 posts, 0 answers
  1. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 11 Feb 2014 Link to this post

    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

  2. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 11 Feb 2014 in reply to Massimiliano Link to this post

    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"
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 14 Feb 2014 Link to this post

    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.
  5. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 14 Feb 2014 in reply to Bozhidar Link to this post

    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
  6. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 17 Feb 2014 Link to this post

    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.
  7. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 17 Feb 2014 in reply to Bozhidar Link to this post

    Thank you Bozhidar much appreciated! It seems I owe you a cofee lately... :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017