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

Cannot load external jquery in SpellCheckControl

10 Answers 160 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
kalyan
Top achievements
Rank 1
kalyan asked on 06 Dec 2019, 05:13 AM

Hello,

We have been using Telerik.Web.UI(v4.0.30319)  SpellCheck control. This control loads old version jquery(v1.11.0). We are updating jQuery reference in our project to 1.12.2 but SpellCheck control is still loading 1.11.0 jquery. I followed a post in Telerik Forums but I cannot get external jQuery loaded using that post. 

 

SpellCheckCtrl.asx

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

    <script src="../../../../Scripts/jquery-1.12.2.js"></script>
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableEmbeddedjQuery="false">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" Path="~/Scripts/jquery-1.12.2.js" />
        <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:RadSpell ID="spell1"
        runat="server"
        IsClientID="true"
        HandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
        DictionaryPath="~/SpellCheck/"
AllowAddCustom="false"
        SpellCheckProvider="EditDistanceProvider"
        EditDistance="2"
        ButtonType="None"></telerik:RadSpell>
    <script language="c#" runat="Server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            if (this.spell1 != null)
            {
                var userSettings = QM.Live.ServiceClients.ServiceLocator.Get<QM.Live.Utilities.Client.UserSettings>();
                this.spell1.Language = userSettings.GetCulture();
                var spellCheckCulture = userSettings.SpellCheckCulture;
                if (spellCheckCulture == null) spellCheckCulture =
                    QM.Live.Utilities.Client.Constants.DefaultCulture;
                this.spell1.DictionaryLanguage = QM.Live.Utilities.Client.SpellChecker.GetDictionary(spellCheckCulture);
            }
        }
    </script>
</form>

<script>
    var spellCheckerClientId = '<%=spell1.ClientID %>';
</script>

Web config:

<add key="Telerik.ScriptManager.EnableEmbeddedjQuery" value="false" />

 

If I don't add web config key, this control always loads embedded jquery. If I add web config key, I see that jQuery is undefined. Please help to get it resolved. Thanks.

10 Answers, 1 is accepted

Sort by
0
kalyan
Top achievements
Rank 1
answered on 10 Dec 2019, 05:39 AM
Can anyone please help here?
0
Rumen
Telerik team
answered on 10 Dec 2019, 02:07 PM

Hi Kalyan,

If you are using an old Telerik version, there is not guarantee that it will work properly with the newer versions of jQuery.

That's why my recommendation is to download the latest and greatest Telerik ASP.NET AJAX version 2019.3.1023, which comes built-in with jQuery 1.12.4, which is the most secure one among the 1.12.x versions of jQuery. You can find more information at jQuery Version History in Telerik UI Controls.


Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
kalyan
Top achievements
Rank 1
answered on 10 Dec 2019, 05:07 PM
Thanks for your reply Ruben. We qre trying to use extrnal jQuery instead of using embedded jQuery so i followed the post but it is not loading external jQuery. Am i missing anything? We want to use 1.12.2 jquery. Is it possible?
0
kalyan
Top achievements
Rank 1
answered on 11 Dec 2019, 08:12 AM
jQuery 1.12.4 has XSS vulnerabilities which is a concern so we want to go with 1.12.2. Can you please guide us on this?
0
kalyan
Top achievements
Rank 1
answered on 12 Dec 2019, 05:30 AM

Hello Rumen,

We are able to disable embedded jquery and load a different version jQuery but we get below error. Any help will be appreciated.

ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:679 Uncaught TypeError: p.onEvent is not a function
    at a.ResizeExtender._configureHandle (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:679)
    at a.ResizeExtender._configureHandleElements (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:673)
    at a.ResizeExtender.initialize (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:473)
    at new a.ResizeExtender (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:453)
    at b.ClassicView.enableMoveResize (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:1662)
    at b.RadWindow._enableMoveResize (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:226)
    at b.RadWindow.set_behaviors (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:1123)
    at b.ClassicRenderer.createUI (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:1387)
    at b.RadWindow._createUI (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:792)
    at b.RadWindow.setUrl (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:980)
0
Rumen
Telerik team
answered on 13 Dec 2019, 04:08 PM

We have solved the vulnerability in jQuery 1.12.4 by patching it with the fix provided by jQuery team

TelerikĀ® UI for ASP.NET AJAX R1 2019 - present are using jQuery version 1.12.4, modified to backport their fix for a potential CORS XSS vulnerability. Static code scans may still show this vulnerability, but it will be a false positive.

This information is available at jQuery Version History in Telerik UI Controls.

All you have to do is to upgrade to R1 2019 or later version of Telerik.Web.UI. After that you will not need to change the jQuery version.

 

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
kalyan
Top achievements
Rank 1
answered on 16 Dec 2019, 10:05 AM
Thanks a lot, Ruben. Tried with latest trial version Telerik package but I still get same error (p.onEvent is not a function). We are okay to use latest version package but in future, if we want to use other version jQuery, it looks like, we will still face same error. Is there any way to use our own version jQuery?
0
Rumen
Telerik team
answered on 17 Dec 2019, 11:29 AM

Hi Kalyan,

I followed the instructions in the following article Including external jQuery and was able to configure the spellchecker to use an external jQuery. For your convenience I have recorded my test and also attached my test page.

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
kalyan
Top achievements
Rank 1
answered on 17 Dec 2019, 01:51 PM

Hello,

While trying to Peek into the DialogHandler class we noticed that there are below properties which can help us

private string _scriptManagerProperties;
private RadScriptManager _scriptManager;
Also, another property UseRSM 

We feel if we can find a way to set these properties with any attributes -  we can set our defined jQuery on the DialogHandler we are using. Can you please guide us a way.

Regards,

Kalyan

 

0
Rumen
Telerik team
answered on 18 Dec 2019, 11:02 AM

Hi Kalyan,

Please let me wrap up the long thread:

  • The latest version of RadSpell (Telerik.Web.UI.dll) comes with a patched version of jQuery 1.12.4 where the XSS security vulnerability is fixed. With regards to this you do not need to downgrade the jQuery version used by the control.
  • If you still want to change the jQuery version in RadSpell dialog follow the steps below:

    web.config    
    <add key="Telerik.ScriptManager.EnableEmbeddedjQuery" value="false" />


    Default.aspx - apply the provided Telerik.Web.UI.RadDialogOpener.prototype.open override to be able to import the jQuery from the main page into the iframe based dialog of RadSpell:

    <%@ Page Language="C#" AutoEventWireup="true" %>
      
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="ScriptManager" runat="server">
                <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>
    
            <asp:TextBox runat="server" ID="TextBox1" Text="behaviour" />
            <telerik:RadSpell ID="spell1" runat="server" ControlToCheck="TextBox1" />
            <script>
                var $ = $telerik.$;
                var $T = Telerik.Web.UI;
                var browser = Telerik.Web.Browser;
    
    
                Telerik.Web.UI.RadDialogOpener.prototype.open = function (dialogName, clientParameters, callbackFunction) {
                    if (!this._handlerChecked) {
                        this._checkDialogHandler(this.get_handlerUrl());
                    }
    
                    //Definition
                    dialogName = this._getExistingPrefixedDialogName(dialogName);
                    var definition = this._getDialogDefinition(dialogName);
                    //ClientParameters
                    //Set the ClientParameters BEFORE calling _applyParameters - because if dialog is cached it wll call the initializer right away
                    var openEventArgs = new $T.DialogOpenEventArgs(dialogName, clientParameters);
                    this.raiseEvent("open", openEventArgs);
                    this._hasOpenedDialog = true;
    
                    clientParameters = openEventArgs.get_parameters();
                    //Callback function
                    if (!callbackFunction) callbackFunction = definition.ClientCallbackFunction;
    
                    //NEW: Add support for classic windows
                    var container;
                    if (this.get_useClassicDialogs()) {
                        //Set a global variable and a global method
                        container = $create($T.ClassicDialog, { dialogOpener: this });
                        container.ClientParameters = clientParameters;
                        this._applyParameters(dialogName, container);
                        if (callbackFunction) container.set_clientCallBackFunction(callbackFunction);
    
                        window.__getCurrentRadEditorRadWindowReference = function () {
                            return container;
                        };
    
                        var wnd = this._openBrowserWindow(container, definition, dialogName);
                        //Needed for the first loading of the window - before the postback
                        wnd.radWindow = container;
                        return wnd;
                    }
                    else {
    
                        container = this._getDialogContainer(dialogName);
                        container.add_beforeShow(function (radWnd) {
                            radWnd.GetContentFrame().contentWindow.jQuery = window.jQuery;
                        });
    
                        var height = definition["Height"] || 0;
                        //Set the height once here and then again after showing
                        if (!container.get_popupElement()) {
                            container.set_height(height);
                            container.set_width(definition["Width"] || 0);
                            container.set_behaviors(definition["Behaviors"]);
                            container.set_modal(definition["Modal"]);
                            container.set_visibleStatusbar(definition["VisibleStatusbar"]);
                            container.set_visibleTitlebar(definition["VisibleTitlebar"]);
                            container.set_keepInScreenBounds(true);
                        }
    
                        if (definition["ReloadOnShow"] != null) {
                            container.set_reloadOnShow(definition["ReloadOnShow"]);
                        }
    
                        container.ClientParameters = clientParameters;
    
                        this._applyParameters(dialogName, container);
    
                        if (dialogName != "SpellCheckDialog") { //RadSpell dialog is not working correctly with autoSize
                            this._sizeCenterCellDelegate = Function.createDelegate(this, this._sizeCenterCellWindowLoadHandler);
                            this._autoSizeDialogDelegate = Function.createDelegate(this, this._autoSizeDialogWindowLoadHandler);
    
                            container.add_pageLoad(this._sizeCenterCellDelegate);
                            container.add_pageLoad(this._autoSizeDialogDelegate);
                        }
    
                        //Optimize code for setting callback function
                        if (callbackFunction) container.set_clientCallBackFunction(callbackFunction);
    
                        //Show dialog
                        this._showDialogContainer(container);
                        if (!container.get_popupElement()) {
                            //Set the height a second time to make sure it is set correctly in IE if the window was not visible
                            container.set_height(height);
                        }
    
                        //Allow  a small timeout and set window active.
                        window.setTimeout(function () {
                            if (container.isVisible()) {
                                container.center();
                                container.setActive(true);
                            }
                        }, browser.iemobile ? 700 : 100);
                    }
                }
            </script>
        </form>
    </body>
    </html>
    

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
kalyan
Top achievements
Rank 1
Answers by
kalyan
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or