Trouble including JQuery - General Discussions - General Discussions - Progress Community
 General Discussions

Trouble including JQuery

  • Trouble including JQuery
  • Hello,
    I'm attempting to use the ResourceFile control to embed JQuery in a custom control. Strangely, on some pages, I've had no difficulty, but in others, JQuery simply will not load.

    Here's roughly what my code looks like:

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Control.ascx.vb" Inherits="OSCPA.Web.UI.Control" %>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    <sf:ResourceLinks ID="resourceLinks" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.jquery-ui-1.8.8.custom.min.js" />
        <sf:ResourceFile Name="~/CSS/Control.css" />
    </sf:ResourceLinks>

    In this case, ~/CSS/Control.css will successfully be loaded, but both JQuery and the jQuery UI file are ignored.
    Any ideas? I'm completely stuck on this. I figure it's a simple setting somewhere or a directive that I'm missing but I'm not sure.
  • Hello Jacob,

    Can you please check if the loading of jQuery is conflicted by some other control inserting the library or some other conflicting library?

    Regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Radoslav,

    Thanks for your reply. I did some more investigating, and it looks like jQuery is being loaded after all, although I cannot see where in the code. The problem seems to be occurring in external jQuery extensions -- I am trying to load some that are not included in Telerik's assembly after jQuery is loaded(pxToEm and EqualHeights) and the "$" object is not defined in these files. I have tried using Sitefinity's own ResourceFile control to load them as well as manually inserting into the head on Page_Init in the codebehind to no avail.

    Any ideas here? Thank you again!
  • Hi Jacob,

    Can you post the markup you are using to include those libraries, as well as a link to a download location for the scripts? I will try to wrap up a quick widget which works with those.

    Kind regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Excellent, thank you! :)

    Here is how I was trying to include the resources:

    <sf:ResourceLinks ID="resourceLinks" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.jquery-ui-1.8.8.custom.min.js" />
        <sf:ResourceFile Name="~/CSS/SingleProductPurchaser.css" />
        <sf:ResourceFile Name="~/Scripts/pxem.jQuery.js" />
        <sf:ResourceFile Name="~/Scripts/jquery.equalheights.js" />
    </sf:ResourceLinks>

    pxem can be obtained from: github.com/.../pxem.jQuery.js

    And equalheights can be obtained from: www.filamentgroup.com/.../ (you will need to scroll down to the code box).
  • Hi Jacob,

    The problem appears to be that your libraries are being loaded before JQuery. This is caused by the RadScriptManager control. It first tries to load scripts coming from relative paths, then scripts from embedded resources, and finally from CDN. This breaks the operation of those scripts and we have requested that this behavior is fixed in the RadScriptManager control. For now the workaround would be to embed your libraries and request them from embedded paths.


    Best wishes,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • What does this mean?

    "embed your libraries and request them from embedded paths."

    I have the following and I still get "$ is not defined"

    <sitefinity:ResourceLinks runat="server" ID="resourceLinks">
            <sitefinity:ResourceFile JavaScriptLibrary="JQuery" />
            <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.jquery-ui-1.8.8.custom.min.js" />
            <sitefinity:ResourceFile Name="~/global/js/midder.js" />
        </sitefinity:ResourceLinks>
  • Hi Brad H,

    Please take a look at those two tutorials:
    Walkthrough: Embedding a JavaScript File as a Resource in an Assembly
    HOWTO: Embedding javascript into a dll

    Lets say that in your SitefinityWebApp project you have a folder called /JS and in ths folder you put your scripts. From there on once you set them to be built as embedded resources they will be built in the SitefinityWebApp.dll and will be accessible through SitefinityWebApp.JS.JavaScriptFileName.js.


    All the best,
    Radoslav Georgiev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  • Is Telerik planning on changing the load order in a future version of Sitefinity so this fix is not required?
  • Hello Jacob,

    There is a way that allows you to load all scripts in one request. You need to use RadScriptManager in your template and define both the embedded and non-embedded scripts in the <CompositeScript> tag.

    Regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hello Radoslav,

    I'm having trouble getting the embedded jquery scripts to load AFTER my custom scripts that rely on jquery. I've tried embedding the files as resources as you suggested and also tried using the composite script tags with no luck so I have to assume I am doing something wrong.

    Could you please post a sample code for this? Assume no expert knowledge and explain it like I'm a 5 year old. Its very frustrating trying to get this to work.

    First attempt - 
    <sf:ResourceLinks ID="ResourceLinks1" runat="server">
            <sf:ResourceFile JavaScriptLibrary="JQuery" />
            <sf:ResourceFile Name="~/scripts/jquery.easing.1.3.js" />
            <sf:ResourceFile Name="~/scripts/my.jquery.script.js" />
        </sf:ResourceLinks>

    Second attempt - 
    Embedded the two custom scripts by setting build action to "Embedded Resource". Then what? How do I then reference these files so they are loaded? Could you please provide code to explain your statement -

    "will be accessible through SitefinityWebApp.JS.JavaScriptFileName.js

    Third attempt - 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">       
            <CompositeScript>
                <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 Path="~/scripts/jquery.easing.1.3.js" />
                    <asp:ScriptReference Path="~/scripts/my.jquery.script.js" />
                </Scripts>
            </CompositeScript>
        </telerik:RadScriptManager>


    Thanks.
  • Hello Theodora,

    When in VS you mark the Script file to be built as embedded resource you have to:
    1) Edit the AssemblyInfo class to reference your script:
    [assembly: WebResource("SitefinityWebApp.scripts.jquery.easing.1.3.js","text/javascript")]

    2) Edit the ResourceLink to point to the embedded file:
    <sf:ResourceFile Name="SitefinityWebApp.scripts.jquery.easing.1.3.js" AssemblyInfo="SitefinityWebApp" />

    Greetings,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Radoslav-

    I spent a lot of time trying to make this work, including either embedded resources from items I've set to be embedded within the SitefinityWebApp or within a separate class library.
    After not getting it to work, I saw another forum post here (can't find it now) by Ivan that explained this normally looks for items within a specific Telerik resources namespace unless you make changes to the global.asax, but there was caution of doing this could break Sitefinity's use of embedded resources.

    If there is a way to make this work without breaking Sitefinity, I'd like to know.

    thanks in advance.

  • Hi,

    I was following these instructions:
    http://www.sitefinity.com/documentation/documentationarticles/developers-guide/sitefinity-essentials/controls/utility-controls/resourcelinks-control 

    And then I ran into an issue.  Even though I set my First ResourceFile to be the JavaScriptLibrary JQuery, JQuery loads AFTER the other files I need, which are dependent on the JQuery library.

    Then I found this thread.

    Now, if I understand this right, the only way to include Javascript files that depend on a library into a control is to compile them as embedded resources into the project?? SO this means that I have to recompile the project for every change made in the script during development?

    I tried following the instructions given above in this post, and the result is an error..

    This is what I've done:

    In AssemblyInfo.cs:
    using System.Web.UI;
    [assembly: WebResource("SitefinityWebApp.Scripts.HomePageDocumentDownloadList.js", "text/javascript")]

    In my control template:
    <sf:ResourceLinks id="resourceLinks" runat="server">
     <sf:ResourceFile JavaScriptLibrary="JQuery"></sf:ResourceFile>
     <sf:ResourceFile Name="SitefinityWebApp.Scripts.HomePageDocumentDownloadList.js" AssemblyInfo="SitefinityWebApp" />
    </sf:ResourceLinks>

    In Visual Studio:
    1) Set ~/Scripts/HomePageDocumentDownloadList.js Build Action to be "Embedded Resource" in the "File Properties" window above my solution explorer

    This is the result, after recompiling:


    Server Error in '/' Application.

    Object reference not set to an instance of an object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

    Source Error: 

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace: 

    [NullReferenceException: Object reference not set to an instance of an object.]
       Telerik.Sitefinity.Web.UI.ResourceLinks.RegisterResource(ResourceFile resource) +1191
       Telerik.Sitefinity.Web.UI.ResourceLinks.CreateChildControls() +509
       System.Web.UI.Control.EnsureChildControls() +102
       System.Web.UI.Control.PreRenderRecursiveInternal() +42
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496
    


    Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.272
     


    I tried adding this:
    <asp:ScriptManager runat="server">
      
    </asp:ScriptManager>


    Per this blog: http://www.sitefinity.com/blogs/gabesumner/posts/11-09-01/how_to_use_jquery_and_other_javascript_libraries_in_sitefinity.aspx

    No avail, same results.

    Has any progress been made in fixing this?  What am I doing wrong (I don't like the idea of compiling my JS but I will if it would at least work..)

    thanks,
    -trevor