Trouble using sf:ResourceFile to load js and css

Posted by Community Admin on 04-Aug-2018 23:32

Trouble using sf:ResourceFile to load js and css

All Replies

Posted by Community Admin on 10-Nov-2011 00:00
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?
Posted by Community Admin on 10-Nov-2011 00:00
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?
Posted by Community Admin on 10-Nov-2011 00:00
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" />
Posted by Community Admin on 15-Nov-2011 00:00
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.
Posted by Community Admin on 15-Nov-2011 00:00
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
Posted by Community Admin on 15-Nov-2011 00:00
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


Posted by Community Admin on 15-Nov-2011 00:00
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
Posted by Community Admin on 30-Nov-2011 00:00
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.
Posted by Community Admin on 02-Dec-2011 00:00
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
Posted by Community Admin on 02-Dec-2011 00:00
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.
Posted by Community Admin on 07-Dec-2011 00:00
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
Posted by Community Admin on 27-Aug-2012 00:00
Boyan, this appears to be broken in 5.1. Can someone please verify if this still works?
Posted by Community Admin on 27-Aug-2012 00:00
Boyan, this appears to be broken in 5.1. Can someone please verify if this still works?
Posted by Community Admin on 30-Aug-2012 00:00
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
Posted by Community Admin on 30-Aug-2012 00:00
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. 
Posted by Community Admin on 31-Aug-2012 00:00
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...





   
This thread is closed