Q1 2015: Problem using external jQuery instead of embedded version

13 posts, 0 answers
  1. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 03 Mar 2015 Link to this post

    I tried to follow the steps mentioned at http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html to use a custom jQuery version instead of the embedded one in the Telerik DLLs.

    When I add this script reference to RadScriptManager:

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

    and I run my project, I get the following exception:

    Assembly 'Telerik.Web.UI, Version=2015.1.225.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4' contains a Web resource with name 'Telerik.Web.UI.Common.Detection.Detection.js', but does not contain an embedded resource with name 'Telerik.Web.UI.Common.Detection.Detection.js'.

    But when I run the project without that "detection" script reference, RadScriptManager insists on adding another script-tag with a reference to the same jQuery file as is already referenced/used in the HEAD section of the page.
    The generated code looks like this then:

    <script src="https://d2i2wahzwrm1n5.cloudfront.net/ajaxz/2015.1.225/Common/Core.js" type="text/javascript"></script>
    <script src="/wsAdmin/jQuery/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    (window.jQuery)||document.write('<script type="text/javascript" src="/wsAdmin/jQuery/jquery-1.11.2.min.js"><\/script>');//]]>
    </script>
     

     
    A few questions:

    1. Can anyone explain why I get the exception when using the "detection" script reference?
    2. And also why RadScriptManager adds another script-tag for the jQuery?

    Thanks in advance for any pointers.

    Best regards, Marja







  2. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 04 Mar 2015 in reply to Marja Link to this post

    Furthermore, the RadScriptManager inserts the non-CDN path in the script-tag, while we have the following in Global.asax:

    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With { _
                                              .Path = "/wsAdmin/jQuery/jquery-1.11.2.min.js", _
                                              .DebugPath = "/wsAdmin/jQuery/jquery-1.11.2.js", _
                                              .CdnPath = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js", _
                                              .CdnDebugPath = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js", _
                                              .CdnSupportsSecureConnection = True, _
                                              .LoadSuccessExpression = "window.jQuery"
                                          })

    The unexpected/unwanted extra script-tag inserted by RadScriptManager would be less of a problem when at least the given CDN-path was used. As that's the one we're using in the HEAD section of the page.

    Best regards, Marja

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 04 Mar 2015 Link to this post

    Hi Marja,

    The inclusion of Detection.js is an error in our documentation and we will fix it for the next upload (on Monday).

    Below is all you need to enable external jQuery:

    <head runat="server">
        <title runat="server"></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" EnableEmbeddedjQuery="false">
                  <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>
        </form>
    </body>
    </html>

    I have updated your telerik points as a gratitude for pointing this problem to us.


    Regards,
    Genady Sergeev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 04 Mar 2015 in reply to Genady Sergeev Link to this post

    Hi Genady,

    Thank you for your reply, but regretfully doing only that is not enough.

    When I don't alter Global.asax the way I showed before, I get an exception like this:

    WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

    And with the Global.asax alteration I mentioned before I lose that exception, but then RadScriptManager always inserts the extra script-tag. And it does so using the non-CDN paths.
    That causes the jQuery scripts to be referenced/loaded twice.

    When I ignore the issue of the 2 jQuery script tags in the page, the application runs fine in a normal http environment.
    But once working in a secure https environment, all kinds of other vague problems start to emerge. All having to do with other JavaScript-files not being loaded correctly (or in time).

    All these issues vanish immediately when I don't instruct RadScriptManager to use the external jQuery version. 

    ????
  6. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 06 Mar 2015 Link to this post

    Hi Marja,

    We are not able to reproduce the problem on our side. What we tried was to add a script resource mapping in the Application_Start event and then disabled the embedded jQuery support.

    As a result, only once instance of jQuery was loaded on the page. We did our tests with unobtrusive validation enabled.

    I am attaching the test project here for a reference. Can you take a look and see whether it loads double jQuery on your side? If not, we would be interested to see what configuration on your side is causing the failure.

    Regards,
    Genady Sergeev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 08 Mar 2015 in reply to Genady Sergeev Link to this post

    Hi Genavy,

    In your example project, you don't have a validator on the page.
    And indeed, in that situation I don't get a 2nd instance of the jQuery reference either.

    Please add a textbox with an associated RequiredFieldValidator to the page, together with a button with CausesValidation="true".
    And then try again.

    In that situation I do get a 2nd instance of the jQuery reference, and it uses the local path to it and thus not the CDN path indicated by the resource mapping in the Application_Start.

    <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="UnobtrusiveValidation._Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title runat="server"></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" EnableEmbeddedjQuery="false">
                <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>
            <telerik:RadListBox runat="server">
                <Items>
                    <telerik:RadListBoxItem Text="ListBoxItem1" />
                </Items>
            </telerik:RadListBox>
            <br />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ControlToValidate="TextBox1" ErrorMessage="Please insert some text" runat="server"></asp:RequiredFieldValidator>
            <br />
            <br />
            <asp:Button ID="Button1" CausesValidation="true" runat="server" />
        </form>
    </body>
    </html>


  8. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 12 Mar 2015 Link to this post

    Hello Marja,

    This turned out to be a bug in the ASP. NET ScriptManager. In order to resolve it you need to both set EnableCDN=true and CdnSetting-TelerikCdn=Enabled on the RadScriptManager. Example:

    <telerik:RadScriptManager runat="server" EnableCdn="true" CdnSettings-TelerikCdn="Enabled">
           </telerik:RadScriptManager>
     
           <telerik:RadListBox runat="server" ID="ListBox1">
               <Items>
                   <telerik:RadListBoxItem Text="Text1" />
               </Items>
           </telerik:RadListBox>
           <asp:RequiredFieldValidator runat="server" ControlToValidate="ListBox1" ErrorMessage="Foo"></asp:RequiredFieldValidator>
       </form>

    This will solve the problem with the double registration by instructing the base ScriptManager not to load the local path script because the CDN is enabled.

    Regards,
    Genady Sergeev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 12 Mar 2015 in reply to Genady Sergeev Link to this post

    Thanks Genavy, but I'm not quite there yet.

    RadScriptManager (and also the regular ScriptManager) put there SCRIPT-tags in the BODY of the page, but that's too late for me.
    I need jQuery to be loaded as the first thing, before any orther JavaScript, because otherwise other scripts don't work.
    Therefore, I already have my own jQuery reference in the HEAD section of the page.

    Using the CDN settings you suggested on RadScriptManager, the 2nd jQuery reference is still generated ... be it now using the CDN paths:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    (window.jQuery)||document.write('<script type="text/javascript" src="jQuery/jquery-1.11.2.js"><\/script>');//]]>
    </script>
     

    But I don't want a 2nd reference at all !!!

    Because as soon as I have a 2nd jQuery reference on the page, thus causing jQuery to be loaded twice, I get other JavaScript errors stating that some jQuery plugin functions we're using are undefined.
    Those functions aren't undefined... they are loaded in the HEAD section of the page, right after the 1st jQuery reference. And it al works fine if we only have jQuery loaded in the HEAD section of the page.

    Any idea how to go about this?

  10. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 12 Mar 2015 Link to this post

    Inspired by this blog post, I've now also tried using the PreApplicationStartMethod attribute to try and force (Rad)ScriptManager to use MY jquery scripts instead of generating its own.

    <Assembly: System.Web.PreApplicationStartMethod(GetType(WebwareNET.wsScriptReferenceInitialiser), "InitialiseScripts")>
    Public NotInheritable Class wsScriptReferenceInitialiser
     
        Public Shared Sub InitialiseScripts()
            ' WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'
     
            Dim l_sJQueryVersion As String = wsUtils.JQueryInstalledVersion
            Dim l_sJQueryPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-" & l_sJQueryVersion & ".min.js")
            Dim l_sJQueryDebugPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-" & l_sJQueryVersion & ".js")
            ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With { _
                                                                      .Path = l_sJQueryPath, _
                                                                      .DebugPath = l_sJQueryDebugPath, _
                                                                      .CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.min.js", _
                                                                      .CdnDebugPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.js", _
                                                                      .CdnSupportsSecureConnection = True, _
                                                                      .LoadSuccessExpression = "window.jQuery"
                                                                  })
     
            Dim l_sJQueryUIVersion As String = wsUtils.JQueryUIInstalledVersion
            Dim l_sJQueryUIPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-ui-" & l_sJQueryUIVersion & ".min.js")
            Dim l_sJQueryUIDebugPath As String = wsUtils.ResolveUrl("~/wsAdmin/jQuery/jquery-ui-" & l_sJQueryUIVersion & ".js")
            ScriptManager.ScriptResourceMapping.AddDefinition("jquery.ui.combined", New ScriptResourceDefinition() With { _
                                                            .Path = l_sJQueryUIPath, _
                                                            .DebugPath = l_sJQueryUIDebugPath, _
                                                            .CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.min.js", _
                                                            .CdnDebugPath = "http://ajax.googleapis.com/ajax/libs/jquery/" & l_sJQueryVersion & "/jquery.js", _
                                                            .CdnSupportsSecureConnection = True
                                                        })
     
        End Sub
     
    End Class

    The above application initialisation runs fine, prior to Global.asax. I can see that when debugging.
    But the 2nd jQuery reference within the BODY section is still inserted into the page by (Rad)ScriptManager.

    What am I missing?
  11. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 12 Mar 2015 in reply to Marja Link to this post

    Additionally, I've now also explicitly added these script references by name to RadScriptManager, like this:

    <telerik:RadScriptManager ID="RadScriptManager1" EnableEmbeddedjQuery="false" EnableCdn="true" CdnSettings-TelerikCdn="Enabled" runat="server">
        <Scripts>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <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>

    Regretfully, no change.  :-(


  12. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 16 Mar 2015 Link to this post

    Hello Marja,

    Okay, let me sum up. You basically need to load the script in the head tag. Why is this? If you use handlers like $(document).ready(function() { }) this should ease any timing issues that one might be facing.

    Additionally RadScriptManager can be configured to output the jQuery script before all other Telerik scripts. The below example shows how do to it (we assume that Global.asax) stays unchanged.

    <head runat="server">
        <title runat="server"></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" EnableCdn="true" CdnSettings-TelerikCdn="Enabled" EnableEmbeddedjQuery="false">
                    <Scripts>
                        <telerik:RadScriptReference Name="jquery" OutputPosition="Beginning"  />
                    </Scripts>
            </telerik:RadScriptManager>
     
            <telerik:RadListBox runat="server" ID="ListBox1">
                <Items>
                    <telerik:RadListBoxItem Text="Text1" />
                </Items>
            </telerik:RadListBox>
            <asp:RequiredFieldValidator runat="server" ControlToValidate="ListBox1" ErrorMessage="Foo"></asp:RequiredFieldValidator>
        </form>
    </body>
    </html>

    As you can see, the above approach will load only one instance of jQuery right before the rest of the Telerik scripts.

    Does this sound more feasible with respect to your scenario?

    Unfortunately we are not aware of other approach to force jQuery to load in the Head while using ScriptResourceDefinition. The only way to do it seems to disable unobtrusive validation, remove ScriptResourceDefinition and manually load jQuery in the head.

    Regards,
    Genady Sergeev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Dao
    Dao avatar
    1 posts
    Member since:
    Mar 2015

    Posted 24 Mar 2015 Link to this post

    I still got error:
    Assembly 'Telerik.Web.UI, Version=2015.1.318.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4' contains a Web resource with name 'Telerik.Web.UI.Common.Detection.Detection.js', but does not contain an embedded resource with name 'Telerik.Web.UI.Common.Detection.Detection.js'.

    although i update the hotfix: "04687 Telerik_UI_for_ASP.NET_AJAX_2015_1_318_Dev_hotfix"
  14. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 30 Mar 2015 Link to this post

    Hello Marja,

    Detection.js is now included in the Core.js file and you don't need to update it manually. This means that you can safely remove the declaration from the script manager.

    The online help already reflects that change.

    Regards,
    Genady Sergeev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017