How do I register a javascript file in a widget?
I am trying to add a script reference to a javascript file that I have sitting in my selected theme under the App_Data... structure. I tried just using the script tag, but noticed this only adds it to the context of where the control is dropped into. I have been trying different settings with the ResourceLinks control, but from what I have read in the documentation it looks like that might only work for css and default javascript libraries that are already built into resources.
<sf:ResourceLinks id="resourcesLinks" runat="server"> <sf:ResourceFile JavaScriptLibrary="JQuery"/> <sf:ResourceFile Name="Styles/galleryview.css"/> <sf:ResourceFile Name="Scripts/jquery.easing.1.3.js"/></sf:ResourceLinks>Hello Stacey,
Can you please try using the JavaScriptEmbedControl and the CssEmbedControl? Sample bellow:
<%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>... <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl> <sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>Thank you for the information. This worked for me, but I do have another question as a result of using the JavaScriptEmbedControl.
Is it possible to keep this control from generating empty span tags in the markup? Below is an example of what I am seeing happen.
<span id="cphContent_C017_jQueryLink"></span><span id="cphContent_C017_jQueryLink2"></span><span id="cphContent_C017_jQueryLink3"></span>Hi Stacey,
The span tag is added by a base class System.Web.UI.WebControls.WebControl which is added to a page.Generally we control the place where the script will be added, but generating the span comes from the ASP.NET control.
All the best,
Ivan Dimitrov
the Telerik team
Ok, I need a little bit of explanation here.
You've given the following code, but where does it go?
<%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>... <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl> <sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>Hey,
The first part goes immediately after the Page Tag ( The first link in the Master Page ).
The following lines go immediately after body>form tag in the master page.
for ex:
<body>
<form id="form1" runat="server" >
<sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl>
<sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>So, here's my new mark-up. Is this correct?
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta charset="UTF-8" /><title>Checkout</title><%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%></head><body><form id="form1" runat="server"><sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl>
<sf:JavaScriptEmbedControl runat="server" ID="jQtransform" ScriptEmbedPosition="Head" Url="/Sitefinity/WebsiteTemplates/LegalZoom/JS/jquery.jqtransform.js"></sf:JavaScriptEmbedControl>
<sf:JavaScriptEmbedControl runat="server" ID="jQScript" ScriptEmbedPosition="Head" Url="/Sitefinity/WebsiteTemplates/LegalZoom/JS/images/script.js"></sf:JavaScriptEmbedControl>Hi,
1. For JQuery you can use
<sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" ScriptType="jQuery"></sf:JavaScriptEmbedControl>
2. You can add the referenced custom script inside
Sitefinity/WebsiteTemplates/PageTemplates/App_Themes/MyTheme/js/
Regards,
Ivan Dimitrov
the Telerik team
This is how you register user/custom controls...
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="YourMasterPage.master.cs" Inherits="SitefinityWebApp.App_Master.YourMasterPage" %>
<%@
Register TagPrefix="sf" Assembly="Telerik.Sitefinity"
Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>Does Sitefinity use jQuery itself? (or any other commonly used Javascript libraries?)
If I register jQuery using the JavaScriptEmbedControl, what version of jQuery do I get? Is there a reason to use this rather than linking to the latest version hosted at Google or Microsoft?
<sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" ScriptType="jQuery"></sf:JavaScriptEmbedControl>
Should I also register jQuery in a custom Master Page?
(I'm happy to register it in this way, but I'm trying to understand if there are any version specific dependencies in Sitefinity or competing libraries loaded so I don't design something that conflicts.)
Thanks,
Dan
Also, what is the benefit of registering CSS and Javascript? Does Sitefinity combine the files into a single download? Does it also make sure that a file isn't included multiple times?
Hello Dan Sorensen,
Yes, Sitefinity uses script combining by default and even whitout script combining the Script Manager checks that a script referred as a resource is going to be included only once .
Best wishes,
Pavel
the Telerik team
Hi Pavel
<sf:JavaScriptEmbedControl Url="/JS/facilitiesScript.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" /><sf:JavaScriptEmbedControl Url="/JS/jquery.tablesorter.min.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" /><sf:JavaScriptEmbedControl Url="/JS/jQueryPrint.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" /><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript">Hi Pavel
<sf:JavaScriptEmbedControl Url="/JS/facilitiesScript.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" /><sf:JavaScriptEmbedControl Url="/JS/jquery.tablesorter.min.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" /><sf:JavaScriptEmbedControl Url="/JS/jQueryPrint.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" /><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript">Clarification: I placed the JavaScriptEmbedControl controls in the widget template for a custom module.