+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Trouble using sf:ResourceFile to load js and css

Trouble using sf:ResourceFile to load js and css

16 posts, 0 answered
  1. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    10 Nov 2011
    Link to this post
    Working on a Custom User Control for Nivo Slider. It requires that a few JS and CSS files are loaded in a certain order. However, the requested files are never rendered to the browser.

    I use the following code to load up jQuery, and some css and js files within a folder in my Sitefinity project called, 'MyWidget'. When I drop this control on a page and click preview, none of these files have been loaded. When I click View Source, I see that MicrosoftAjax.js is loaded, but none of the files I requested, nor jQuery were loaded.

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <sf:ResourceLinks id="ResourceLinks" runat="server">
        <%--Load Nivo Required Styles--%>
        <sf:ResourceFile Name="~/MyWidget/nivo-slider/nivo-slider.css" />
        <sf:ResourceFile Name="~/MyWidget/nivo-slider/themes/esd/esd.css" />
         
        <%--Load Nivo Slider Required JavaScript--%>
        <sf:ResourceFile JavaScriptLibrary="jquery" />
        <sf:ResourceFile Name="~/MyWidget/nivo-slider/jquery.nivo.slider.pack.js" />
        <sf:ResourceFile Name="~/MyWidget/nivo-slider/nivo-config.js" />
    </sf:ResourceLinks>

    However, if I inject these links inline into a literal control using the code behind, I can get it to work.

    I have also confirmed that I can get this to work if include each file separately using the js widget and css widget within the Sitefinity page editor.

    However, I am not having any luck using this sf:ResourceFile syntax in a User Control file. What am I doing wrong? What else is required to make this work?
  2. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    10 Nov 2011
    Link to this post
    Note: I'm using Sitefinity 4.2.

    Could this be caused by the issue with RadScriptManager loading files in an order different than specified as mentioned back in July?

    Basically, I'm looking for that a lot of others in the forum are looking for: 

    If we have a mixture of the following:
    - jQuery.js
    - a custom.js file
    - A custom.css file
    that must be loaded in a specific order...

    What are the specific steps I need to follow in custom control code to load them in my requested order?
  3. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    10 Nov 2011
    Link to this post
    Note: I've also tried this method. No luck.

    <%@ Register TagPrefix="pc" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"%>
     
    <sf:ResourceLinks id="ResourceLinks2" runat="server">
        <sf:ResourceFile JavaScriptLibrary="jquery" />
    </sf:ResourceLinks>
     
    <%--Load Nivo Required Styles--%>
    <pc:CssEmbedControl runat="server" id="CssEmbedControl1" Url="~/MyWidget/nivo-slider/nivo-slider.css" />
    <pc:CssEmbedControl runat="server" id="CssEmbedControl2" Url="~/MyWidget/nivo-slider/themes/mytheme/mytheme.css" />
     
    <%--Load Nivo Slider Required JavaScript--%>
    <pc:JavaScriptEmbedControl runat="server" ID="JavaScriptEmbedControl1" ScriptEmbedPosition="Head" Url="~/MyWidget/nivo-slider/jquery.nivo.slider.pack.js" />
    <pc:JavaScriptEmbedControl runat="server" ID="JavaScriptEmbedControl2" ScriptEmbedPosition="Head" Url="~/MyWidget/nivo-slider/nivo-config.js" />
  4. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    15 Nov 2011
    Link to this post
    Quick Update:

    1. I had registered the user control wrong in the Sitefinity Admin Settings. Fixing it solved some issues. Followed this document: http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-adding-controls-to-the-toolbox.html

    2. Still running into the issue where javascript resources load out of order. The current recommendation is to embed my javascript to work around the out of order issue. However, I'm having a bit of trouble with that. I'm not sure if I have embedded my js file correctly yet. Documentation is fairly sparse on that point.
  5. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    15 Nov 2011
    Link to this post
    Hi Dan Sorensen,

    I'm glad to hear that you have managed to find out the reason for the initial problems. Can you please update us on the exact problems you're experiencing with incorrect load order of javascript resources?
    Concerning the embedding troubles you have, please take a look at this forum post, where Ivan has explained a possible reason for the problems you might have - "The problem is that ResourceLinks is looking inside Telerik.Sitefinity.Resources.Reference which is the default configuration value and your script is not found there". Alternatively, I believe you might find the discussion on the topic between Radoslav and Jochem useful. In case any problems persist, please let us know, we'll be glad to help.

    All the best,
    Boyan Barnev
    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
  6. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    15 Nov 2011
    Link to this post
    JQuery now loads by including this: 

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <sf:ResourceLinks ID="ResourceLinks1" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
    </sf:ResourceLinks>


    However, when I try to load my own Javascript files*, I receive the following response from Telerik.Web.UI.WebResource.asd?....

    /* START  */
    /* Skipped loading 2 invalid resources. */
    /* END  */
    if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();
    (function() {

    The "Skipped loading 2 invalid resources." message suggests that I did SOMETHING wrong in pointing to my javascript files.

    The message boards suggest a number of different things, and the official documentation only has examples for custom css, not custom js. So I've tried a number of different things hoping to land upon the right syntax. After clicking 'Build Action: Embedded Resource' on the necessary js scripts:

    // In AssemblyInfo.cs
    [assembly: System.Web.UI.WebResource("SitefinityWebApp.Esd.Libraries.nivo-slider.nivo-config.js", "text/javascript")]
     
    // inside my widget's ascx file:
     
    <sf:ResourceLinks ID="ResourceLinks1" runat="server">
        <sf:ResourceFile Name="~/Esd/Libraries/nivo-slider/nivo-config.js" />
    </sf:ResourceLinks>
     
    // or
     
    <sf:ResourceLinks ID="ResourceLinks1" runat="server">
      <sf:ResourceFile Name="SitefinityWebApp.Esd.Libraries.nivo-slider.nivo-config.js" Static="true" />
    </sf:ResourceLinks>

    1. Do I need to use 'Static="true"'?

    2. Use the dot syntax or slash syntax?

    3. Where must I store my javascript files? Is there a specific Sitefinity folder to use, or can I use any folder inside my project?

    4. Is my assemblyinfo.cs syntax correct?

    I apologize for so many questions.
    Dan


  7. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    15 Nov 2011
    Link to this post
    The official documentation I was referring to is here:
    http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-utility-controls-resourcelinks-control.html

    It has examples on how to load CSS and the included JavaScript files. No instructions on how to include my own JavaScript files. (my own files are dependent upon jQuery, so I must confirm that jQuery loads first)

    Thanks
  8. DMRC
    DMRC avatar
    5 posts
    Registered:
    30 Aug 2011
    30 Nov 2011
    Link to this post
    Yes, it would be really helpful if we could get a better response regarding this. I've gone through a couple of blog posts and each time it's a dead end.
  9. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    02 Dec 2011
    Link to this post
    Hi Dmrc,

    Can you try loading your custom javascript files using our public JavaScriptEmbedControl widget, you can use it on your page like this:
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" Assembly="Telerik.Sitefinity" %>
    <sf:JavaScriptEmbedControl Url="~/myFile.js" runat="server" ID="JavaScriptEmbedControl1" ScriptEmbedPosition="Head"></sf:JavaScriptEmbedControl>


    All the best,
    Boyan Barnev
    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
  10. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    02 Dec 2011
    Link to this post
    Boyan: Will/can that assure that my javascript file is loaded AFTER jQuery?
    Currently, I've had to switch to yepnope.js as a loader for my files. After jQuery is loaded, it pull in the rest of my files. Not efficient, but so far it has been reliable.
  11. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    07 Dec 2011
    Link to this post
    Hi Dan Sorensen,

    You'll need to specify ScriptEmbedPosition="BeforeBodyEndTag" (or InPlace) so you can make sure jQuery's been loaded. I have recorded a simple test I've performed on my local project, checking whether I have jQuery loaded when loading my custom JavaScript file through the JSEmbedControl, you can take a look at it here.

    Greetings,
    Boyan Barnev
    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
  12. Jeremy
    Jeremy avatar
    8 posts
    Registered:
    13 Apr 2011
    27 Aug 2012
    Link to this post
    Boyan, this appears to be broken in 5.1. Can someone please verify if this still works?
  13. Jeremy
    Jeremy avatar
    8 posts
    Registered:
    13 Apr 2011
    27 Aug 2012
    Link to this post
    Boyan, this appears to be broken in 5.1. Can someone please verify if this still works?
  14. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    30 Aug 2012
    Link to this post
    Hello guys,

    Can you please outline the scenario where you've observed this to be causing problems?

    We have tested this today for another client's report and the functionality seems to work properly. For your convenience I'm pasting our reply below:

    I have just verified this functionality to be working correctly on one of my local 5.1 projects, for your convenience please find below the source oft he control used for the test and a short video demonstrating the project behavior.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestResourceLinks1.ascx.cs" Inherits="SitefinityWebApp.CustomLogic.Widgets.TestResourceLinks1" %>

    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" Assembly="Telerik.Sitefinity" %>

    <sf:JavaScriptEmbedControl Url="~/MyScripts/myScript.js" runat="server" ID="JavaScriptEmbedControl1" ScriptEmbedPosition="BeforeBodyEndTag"></sf:JavaScriptEmbedControl>

    if (jQuery) {

        alert("jQuery active");

    }

    else {

        alert("jQuery not active");

    }


    On a side note you can use our ResourceLinks control to load your scripts as well, please note that it provides you with the ability of automatically combining embedded scripts from the same assembly. Please keep in mind that ResourceLinks loads scripts coming from relative paths, then scripts from embedded resources, and finally from CDN. Actually there would be no point using resourceLinks to load relative path scripts anyways, as it would be the same as using a <script> tag in your control masterpage.



    Kind regards,
    Boyan Barnev
    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
  15. Jeremy
    Jeremy avatar
    8 posts
    Registered:
    13 Apr 2011
    30 Aug 2012
    Link to this post
    The code does work, but visual studio 2010 throws an error when you try and build the site. 

    I tested with the latest build of 5.1 with a fresh blank site using your example and I still get the build error. 
  16. Srinath
    Srinath avatar
    8 posts
    Registered:
    24 Feb 2012
    31 Aug 2012
    Link to this post
    Boyan,
               The Code you have mentioned below, does not works in the Upgraded Sitefinity 5.1 version Project.

    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"
        Assembly="Telerik.Sitefinity" %>
    <sf:javascriptembedcontrol url="~/MyScripts/myScript.js" runat="server" id="JavaScriptEmbedControl1"
        scriptembedposition="BeforeBodyEndTag"></sf:javascriptembedcontrol>

    As I have checked this code in the Sitefinity 5.0 project,it works without causing any error.
    In 5.1 version which  i have upgraded from 5.0, the error displays for "sf" is unrecognized tag.  
    Please provide a solution for this issue ASAP..

    Thanks in Advance...



    
    
       
16 posts, 0 answered