Trouble using sf:ResourceFile to load js and css
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>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?
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" />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.
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
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>/* START *//* Skipped loading 2 invalid resources. *//* END */if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();(function() // 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>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
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.
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>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.
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
Boyan, this appears to be broken in 5.1. Can someone please verify if this still works?
Boyan, this appears to be broken in 5.1. Can someone please verify if this still works?
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");
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.
Boyan,
The Code you have mentioned below, does not works in the Upgraded Sitefinity 5.1 version Project.